Scrolling to specific sections in Angular to dynamically add classes

Question

Scrolling to specific sections in Angular to dynamically add classes

In my Angular-based single page application (SPA), I am looking to dynamically add a class to the navigation menu whenever the user reaches a specific section. After exploring various options, I found a potential solution demonstrated in this StackBlitz example.

Check out the solution on StackBlitz here

css angular typescript

Answer 1

Answer №1

To ensure proper functionality, it is important to query the HTML elements within the ngOnInit lifecycle hook.

Include the following code snippet:

  ngOnInit() {
    this.sections = document.querySelectorAll('section');
    this.navLi = document.querySelectorAll('nav .container ul li');
  }

Once you have updated your code to the following:

import { Component, HostListener, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  sections: NodeListOf<HTMLElement>;
  navLi: NodeListOf<HTMLElement>;

  ngOnInit() {
    this.sections = document.querySelectorAll('section');
    this.navLi = document.querySelectorAll('nav .container ul li');
  }

  @HostListener('window:scroll', ['$event'])
  onscroll() {
    var current: any = '';
    this.sections.forEach((section) => {
      const sectionTop = section.offsetTop;
      if (scrollY >= sectionTop - 60) {
        current = section.getAttribute('id');
      }
    });

    this.navLi.forEach((li) => {
      li.classList.remove('active');
      if (li.classList.contains(current)) {
        li.classList.add('active');
      }
    });
  }
}

Your desired behavior should now be achieved successfully.

For further information on the ngOnInit lifecycle hook, refer to https://angular.io/guide/lifecycle-hooks

Answer 2

To ensure proper functionality, it is important to query the HTML elements within the ngOnInit lifecycle hook.

Include the following code snippet:

  ngOnInit() {
    this.sections = document.querySelectorAll('section');
    this.navLi = document.querySelectorAll('nav .container ul li');
  }

Once you have updated your code to the following:

import { Component, HostListener, VERSION } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular ' + VERSION.major;
  sections: NodeListOf<HTMLElement>;
  navLi: NodeListOf<HTMLElement>;

  ngOnInit() {
    this.sections = document.querySelectorAll('section');
    this.navLi = document.querySelectorAll('nav .container ul li');
  }

  @HostListener('window:scroll', ['$event'])
  onscroll() {
    var current: any = '';
    this.sections.forEach((section) => {
      const sectionTop = section.offsetTop;
      if (scrollY >= sectionTop - 60) {
        current = section.getAttribute('id');
      }
    });

    this.navLi.forEach((li) => {
      li.classList.remove('active');
      if (li.classList.contains(current)) {
        li.classList.add('active');
      }
    });
  }
}

Your desired behavior should now be achieved successfully.

For further information on the ngOnInit lifecycle hook, refer to https://angular.io/guide/lifecycle-hooks

Scrolling to specific sections in Angular to dynamically add classes

Answer №1

Similar questions

Change the CSS hover menu to function as a click menu instead of a hover

Problem arises when combining string manipulation and piping operations

Can we refactor by using a distinct function?

Upgrading Xeditable button designs using AngularJS

TypeScript's typeof operator in Angular functions allows you to check the

Currently, I am working on developing a to-do task manager using Angular 2. One of the tasks I am tackling involves updating the value

The property is not found in the '{}' type but is necessary in the type... Typescript connect strategy

Angular - How child components can communicate with their parent components

Tips for transferring information between two components when a button is clicked in Angular 2

Styling with react-jss based on intricate conditionals

The pseudo-element ::after will not be positioned below the specified element

The CSS selector for radio input does not match when checked in IE7

Troubleshooting a dynamically loaded Angular 2 module in Chrome and VS Code

Responsive design in Bootstrap(-Vue) with compact input fields

Using jquery and css to allow hover effects and modify the color of active tabs

Looking for a way to toggle the visibility of a dropdown list when clicking on an input in Angular7?

Problems with scrolling in the navigation bar, main content area, and footer

A generic TypeScript with the ability to extend optionally

Creating a personalized design for Bootstrap Badge

There are certain CSS3 properties that are not being accounted for in the CSS min