How to Highlight a Link of Side Nav When It Has Multiple Child Links in Angular

🔗 How to Highlight a Link When It Has Multiple Child Links in Angular

When building a sidebar in Angular, you might want to highlight a parent link when any of its child routes are active. Angular’s routerLinkActive only works for single routes — so here’s a quick 2-step solution using a custom directive.

1. Step 1: Create a custom directive
   Write a directive that checks the current URL against a list of child links and adds an active class if any match.

Step 1: Directive Code

import { Directive, ElementRef, Input, OnDestroy, OnInit, Renderer2 } from '@angular/core'; import { NavigationEnd, Router } from '@angular/router'; import { Subscription } from 'rxjs'; import { filter } from 'rxjs/operators'; @Directive({ selector: '[activeLinks]' }) export class ActiveLinksDirective implements OnInit, OnDestroy { @Input() activeLinks: string[] = []; @Input() activeClass = 'active'; private sub!: Subscription; constructor( private router: Router, private el: ElementRef, private renderer: Renderer2 ) {} ngOnInit(): void { // Subscribe to router events this.sub = this.router.events .pipe(filter(event => event instanceof NavigationEnd)) .subscribe((event) => { this.updateActiveClass(); }); // Initial check this.updateActiveClass(); } ngOnDestroy(): void { if (this.sub) { this.sub.unsubscribe(); } } private updateActiveClass(): void { if (!this.activeLinks || this.activeLinks.length === 0) { return; } const currentUrl = this.router.url; let isActive = false; // Check each active link for exact match for (const link of this.activeLinks) { // Exact match (including query parameters) if (currentUrl === link) { isActive = true; break; } // Decoded exact match (in case of encoded URLs) const decodedCurrentUrl = decodeURIComponent(currentUrl); const decodedLink = decodeURIComponent(link); if (decodedCurrentUrl === decodedLink) { isActive = true; break; } } // Apply or remove the active class if (isActive) { this.renderer.addClass(this.el.nativeElement, this.activeClass); } else { this.renderer.removeClass(this.el.nativeElement, this.activeClass); } }

2. Step 2: Use it in your template
   On your parent menu link, pass the list of child URLs to the directive.

Step 2: Template Code

<a mat-list-item routerLink="/dashboard/add-product" [activeLinks]="['/dashboard/add-product', '/dashboard/product?productType=1', '/dashboard/product?productType=2', '/dashboard/product?productType=3' ]" > <span class="material-symbols-outlined">calendar_add_on</span> <span *ngIf="sideBarOpen">Add Product</span> </a>

✅ Works with multiple child links, query parameters, and is easy to reuse.

✅ This blog is written by TechJourney with Gagan, sharing practical Angular tips for developers.