Adding active class for nav-link

Question

I need to add an active class to the .nav-link inside the parent nav-item if any of the sub-menu is active.

<ul>
    <li class="nav-item">
        <a class="nav-link" (click)="BEDropdownOpen = !BEDropdownOpen" [attr.aria-expanded]="BEDropdownOpen"
            aria-controls="basic-elements-dropdown">
            Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active">Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

If any of the .nav-link inside the div.collapse has an active class, an active class should be added to the nav-link inside the parent nav-item

Answer 1

You can create a template variable for each link and then assign the class using ngClass like so:

<ul>
    <li class="nav-item">
        <a
           class="nav-link"
           (click)="BEDropdownOpen = !BEDropdownOpen"
           [attr.aria-expanded]="BEDropdownOpen"
           [ngClass]="{'active': accordionLink.isActive || typographyLink.isActive || tooltipLink.isActive}"
           aria-controls="basic-elements-dropdown">Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active" #accordionLink="routerLinkActive">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active" #typographyLink="routerLinkActive">Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active" #tooltipLink="routerLinkActive">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Answer 2

You can use isActive property of routerActiveLink and then use ngClass on parent element.

<ul>
    <li class="nav-item">
        <a class="nav-link" (click)="BEDropdownOpen = !BEDropdownOpen" [attr.aria-expanded]="BEDropdownOpen" aria-controls="basic-elements-dropdown"   [ngClass]="{'active': rla.isActive}">
            Elements
        </a>
        <div class="collapse" id="basic-elements-dropdown" [ngbCollapse]="!BEDropdownOpen">
            <ul class="nav flex-column sub-menu">
                <li class="nav-item">
                    <a class="nav-link" routerLink="/accordions" routerLinkActive="active" #rla="routerLinkActive">Accordion</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/typography" routerLinkActive="active" #rla="routerLinkActive" >Typography</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" routerLink="/tooltips" routerLinkActive="active" #rla="routerLinkActive">Tooltip</a>
                </li>
            </ul>
        </div>
    </li>
</ul>

Answer 3

Using the idea of @T.Shashwat. You declare ViewChildren and a getter

@ViewChildren('rla') links:QueryList<routerLinkActive>
get isActive(){
   return this.links?this.links.find(x=>x.isActive)!=null:false
}