title: Angular router link active nested menu
body: <p>I'm trying to make a nested menu with angular routes.</p>
  <p>What I need is to apply class to a nested route if it's active and apply class to a parent component if its child is active.</p>
  <p>How do I achieve this? For now I'm doing recursive menu building for ease of use when I need multilevel nesting.</p>
  <p>component.html</p>
  <pre><code>&lt;a (click)=&quot;toggleActive()&quot; [class.active]=&quot;isActive&quot; [routerLink]=&quot;menuItem.link&quot; *ngIf=&quot;menuItem.link; else noLink&quot;&gt;
    &lt;i *ngIf=&quot;menuItem.faClass&quot; class=&quot;fa fa-{{menuItem.faClass}}&quot;&gt;&lt;/i&gt;
    {{menuItem.name}} &lt;span *ngIf=&quot;menuItem.children &amp;&amp; menuItem.children.length &gt; 0&quot; class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;
  &lt;/a&gt;
  
  &lt;ng-container *ngIf=&quot;menuItem.children &amp;&amp; menuItem.children.length &gt; 0&quot;&gt;
    &lt;ul class=&quot;nav child_menu&quot; [class.active]=&quot;isActive&quot; routerLinkActive=&quot;active&quot;
        *ngFor=&quot;let item of menuItem.children&quot;&gt;
      &lt;li menu-item [menuItem]=&quot;item&quot; (checkActive)=&quot;updateActiveState()&quot;&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/ng-container&gt;
  
  &lt;ng-template #noLink&gt;
    &lt;a (click)=&quot;toggleActive()&quot; [class.active]=&quot;isActive&quot;&gt;
      &lt;i *ngIf=&quot;menuItem.faClass&quot; class=&quot;fa fa-{{menuItem.faClass}}&quot;&gt;&lt;/i&gt;
      {{menuItem.name}} &lt;span *ngIf=&quot;menuItem.children &amp;&amp; menuItem.children.length &gt; 0&quot; class=&quot;fa fa-chevron-down&quot;&gt;&lt;/span&gt;
    &lt;/a&gt;
  &lt;/ng-template&gt;
  </code></pre>
  <p>component.ts</p>
  <pre><code>@Component({
    selector: '[menu-item]',
    templateUrl: './menu-item.component.html',
    styleUrls: ['./menu-item.component.scss'],
    host: {
      '[class.active]': 'hostActive &amp;&amp; isActive',
      '[class.active-sm]': 'hostActiveSm &amp;&amp; isActive'
    }
  })
  export class MenuItemComponent implements OnInit, AfterViewInit, OnChanges {
  
    public menuSize;
    public isActive = false;
  
    @Input() menuItem: MenuItem;
    @Output() checkActive: EventEmitter&lt;void&gt; = new EventEmitter&lt;void&gt;();
    @ViewChild(MenuItemComponent) menuComponent: MenuItemComponent;
  
    private hostActive = true;
    private hostActiveSm = false;
  
    @HostBinding('class') hostClass = this.hostActive &amp;&amp; this.isActive ? 'active' : this.hostActiveSm &amp;&amp; this.isActive ? 'active-sm' : '';
  
    constructor(
      private router: Router,
      private uss: UiStateService,
    ) {
    }
  
    ngOnInit() {
      this.uss.menuSubject.subscribe(msg =&gt; {
        this.menuSize = msg;
        if (this.menuSize === MenuSizes.sm) {
          this.hostActive = false;
          this.hostActiveSm = true;
        } else {
          this.hostActive = true;
          this.hostActiveSm = false;
        }
        this.updateActiveState();
      });
  
      this.router.events.subscribe((e: Event) =&gt; {
        if (e instanceof NavigationEnd) {
          this.updateActiveState();
        }
      });
    }
  
    ngOnChanges() {
    }
  
    ngAfterViewInit() {
      this.updateActiveState();
    }
  
    public toggleActive(): void {
      this.isActive = !this.isActive;
      // if (this.menuComponent) {
      //   this.menuComponent.isActive = true;
      // }
    }
  
    private updateActiveState(): void {
      // reset previous state
      this.isActive = false;
      if (this.menuComponent) {
        this.menuComponent.isActive = false;
      }
  
      // Check state of item with no els
      const url = this.router.url;
      console.log('URL', url, 'Menu link', this.menuItem.link);
      console.log(url.match('/' + this.menuItem.link + '$/'));
      if (this.menuItem &amp;&amp; this.menuItem.link &amp;&amp; url.match('/' + this.menuItem.link + '$/')) {
        this.isActive = true;
        this.checkActive.emit();
      }
  
      if (this.menuComponent) {
        console.log('Menu component');
        console.log(this.menuComponent, this.menuComponent.menuItem.link);
        this.isActive = true;
      }
    }
  
  }
  </code></pre>
  <p>Is there a way of knowing from a component whether its route is active? The trick is that I'm using <code>[routerLink]</code> and not a <code>routerLink</code> so that I can pass <code>.</code> as a link to the root page.</p>
  <h1>Update</h1>
  <p>The best I could recreate <a href="https://stackblitz.com/edit/angular-jwwrse" rel="nofollow noreferrer">stackblitz</a>
  Try to visit &quot;Dasboard&quot;. It should add an &quot;active&quot; class to parent <code>li</code>. If you add it yourself you would see the applied class on it's element and a colored bar on the right.</p>