Angular 2 change sidenav content depending on the current router state

Question

I am developing single page application in Angular 2. I am using angular material mat-sidenav and mat-toolbar. Toolbar has sidenav toggle button, buttons to open 'Clients' section and 'Reports' section. This structure is common throughout the project.

So the app looks like this:

I have to change the content in the sidenav (and in the main field) depending on the current state of the router. So, if the 'Clients' section is opened the sidenav should show some subsections related to the clients. Similarly, for 'Reports' section only subsections related to the reports should be available. How do I do it?

Lothir Lothir · Accepted Answer · 2017-10-19T13:05:56

I've done that by checking if URL path contains some specified part. For example if you want to have visible submenu for clients it could be '/clients' etc. Then you just use *ngIf directive:

<ul *ngIf="location.includes('/clients')">

To check current URL you have to listen for router changes. So, in the component where you have sidenav content you need to subscribe to router.events property.

import { Router, NavigationEnd } from '@angular/router';
import 'rxjs/add/operator/filter';
...
export class SidenavComponent {
  location = '';
  constructor(router: Router) {
    router.events
      .filter(event => event instanceof NavigationEnd)
      .subscribe((event: NavigationEnd) => {
        this.location = event.url
      })
...

Apart of NavigationEnd router emit multiple other events so we filtering them in example above and after subscription, we're updating location property

Angular 2 change sidenav content depending on the current router state

2 Answers