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.

Create Search Functionality using 2 steps using pipe in Angular

To Implement Search Functionality without writing code in ts file

Step1: Create a Pipe using below code.

Code Of Search Filter Pipe

import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchByFilter' }) export class SearchByFilterPipe implements PipeTransform { transform(items: any[], searchText: string, fieldName: string): any[] { if (!items) return []; if (!searchText) return items; searchText = searchText.toLowerCase(); return items.filter(item => item[fieldName]?.toLowerCase().includes(searchText)); } }

Step2: write below code where you want to implement search like in drop down.

Code Snippet

<div> <mat-label class="font-semibold">Select Company*</mat-label> <mat-form-field class="w-1/3"> <mat-select formControlName="companyId" (selectionChange)="onOrganizationChange($event.value)" placeholder="Select Company"> <mat-form-field > <input matInput placeholder="Search Company" #searchInput /> </mat-form-field> <mat-option *ngFor="let org of organizationsData | searchByFilter:searchInput.value:'organizationName'" [value]="org.organizationId"> {{ org.organizationName }} </mat-option> </mat-select> </mat-form-field> </div>

In above code we use just

<input matInput  placeholder="Search Company" #searchInput /><br> 
based on referece variable we took input and pass to pipe | searchByFilter:searchInput.value:'organizationName'"