How to add class depending on route | Angular 6

Question

I have some problems with getting current path of url, when user changes the route by clicking the link on the navbar module. How to get current url path every time when user clicks on route links on the navigation module. I need to get it on navigation.ts script. There what I have now: TS:

constructor(private router: Router, private route: ActivatedRoute) {
  this.router.events.subscribe(res => {
    if (this.router.url == "/buy") {
      this.navExpand = true;
    }

    else {
      this.navExpand = false;
    }
  });
}

It works but every time it loops 8 times. I am working on angular 6

Answer 1

because the router is subject to several events.

Try filtering on the last event, NavigationEnd :

  this.router.events.pipe(
    filter(event => event instanceof NavigationEnd)
  ).subscribe(res => {
    if (this.router.url == "/buy") {
      this.navExpand = true;
    }

    else {
      this.navExpand = false;
    }
  });

Imports :

import { filter} from 'rxjs/operators';
import { NavigationEnd } from '@angular/router';