'when router link to change body tag class name angular

<body [ngClass]="routerLink="/" ? 'header-fixed counter-scroll' : 'header-fixed'">

here route link / to class name(header-fixed counter-scroll) other router links to class name(header-fixed)

this coding working but this is right format

angular

Solution 1:^[1]

It's generally an indication of bad project structure as you should consider having two layouts for different routes. But to make this work, you can use the Angular router to get the active route and use ngClass to apply the correct class based on the active route.

Using observables to also listen for changes in the active route, example:

public activeRoute$: Observable<string> = this.router.events.pipe(
      filter(x => x instanceof NavigationStart),
      map((x) => (x as NavigationStart).url));;

constructor(private router: Router) { }

ngOnInit(): void { }

<div [ngClass]="{'header-fixed': true, 'counter-scroll': ((activeRoute$ | async) === '/')}"></div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Nathan

'when router link to change body tag class name angular

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]