Angular 7 Make parent active when child link is routerLinkActive

Question

I'm trying to make the h2 have a class of 'active' if the child link is routerLinkActive.

If looked at: Angular 6 - How do I set a Parent Menu Item To Active using routerLinkActive When Clicking on Its Child Menu Item?

and https://angular.io/api/router/RouterLinkActive

but neither have helped?

my code:

        <ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
            <div class="navGroup" *hasClaim="item.Claim">
                <h2 class="acc_trigger" [class.active]="isActive" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
                <ng-container *ngIf="item.MenuItem != null">
                    <div class="acc_container" >
                        <ul class="ulNav">
                            <li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
                        </ul>
                    </div>
                </ng-container>
            </div>
        </ng-container>

score 2 · Accepted Answer · answered Feb 22 '19 at 19:41

according to the docs, it says you should be able to put the routerLinkActive on any ancestor of the link you're looking for (including a list of submenu links), so just adding routerLinkActive to the navGroup:

<ng-container *ngFor="let item of nav.Navigation.MenuItem; let r = index">
    <div class="navGroup" *hasClaim="item.Claim" routerLinkActive="active">
        <h2 class="acc_trigger" (click)="navSelect(item, $event)" ><span class="fas {{item.icon}}"></span>{{item.Text}}</h2>
        <ng-container *ngIf="item.MenuItem != null">
            <div class="acc_container" >
                <ul class="ulNav">
                    <li *ngFor="let nav of item.MenuItem"><a [routerLink]="nav.Url" routerLinkActive="active-link" >{{nav.Text}}</a></li>
                </ul>
            </div>
        </ng-container>
    </div>
</ng-container>

and making your h2 style more like

.navGroup.active>h2 { /* some styles for your active h2 */ }

should make it work. although i've seen lots of complaints that routerLinkActive has odd behavior, and they seem to keep changing it with each new version -- have you tried this way?

Angular 7 Make parent active when child link is routerLinkActive

1 Answers1