Angular2 Router in nested tabs does not trigger active class when navigating

Question

When navigating between parent tabs the child tab loses active class state.

First time view is rendered the tab has the class active as expected when selected:

Navigating through the child tabs works fine - the selected child tab is shown as active. But if I navigate to another parent tab:

And then back to the first parent tab:

The child tab "Opgaver" (which were selected before) is no longer active. This happens for all child tabs - which means that no child tab is shown as active, regardless of which was selected before navigating.

I have been looking at the following questions and issues and none of the solutions worked for me.

I am using Router 3.0.0.

Also the console in Chrome throws no errors when navigating.

I am guessing that this error is because the property routerLink from Router does not get updated when navigating? Or it might be my setup in the html files:

Citizen-Page.html (selector: m3-citizen-navigation)

<div class="page-content-wrapper full-height email-layout">
<div class="content full-height">
    <m3-tabs [tabs]="tabs$ | async" [dashboardActive]="dashboardActive$ | async" (tabClosed)="closeTab($event)" 
    (dashboardActivated)=navigateToDashboard($event) class="citizen">
    </m3-tabs>
    <router-outlet></router-outlet>
</div>

Tabs-Component.html (selector: m3-tabs)

<ul class="nav nav-tabs m3-tabs nav-tabs-complete">
<li [class.active]="dashboardActive">
    <a href="javascript:;" (click)="activateDashboard()">Overblik</a>
</li>
<li *ngFor="let tab of tabs" [class.active]="tab.active">
    <a [routerLink]="[tab.url]">
        {{ tab.caption }}
        <span class="tab-close close" (click)="closeTab($event, tab)">
            <i *ngIf="tab.hasUpdates" class="fa fa-exclamation-triangle" style="color:blue"></i>
            <i class="fa fa-close"></i>
        </span>
    </a>
</li>

Citizen-details-page.html (selector: citizen-details-page)

<div>
    <m3-citizen-navigation [citizen]="citizen$ | async" [cpr]="cpr" (caseRemoved)="removeCase($event)"></m3-citizen-navigation>
    <div class="tab-content" style="padding: 0">
        <router-outlet></router-outlet>
    </div>
</div>

Citizen-navigation-page.html (selector: m3-citizen-navigation)

<div class="tab-navigation-container m3-sub-navigation" *ngIf="citizen">
<ul class="nav nav-tabs m3-tabs">
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: true }">
        <a routerLink="/citizens/{{citizen.id}}"><span>Overblik</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/journals"><span>Journal</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/tasks"><span>Opgaver</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/plans"><span>Plan</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/interviews"><span>Samtale</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/cvs"><span>CV</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/foundations"><span>Grundlag</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/absences"><span>Fravær</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/approaches"><span>Tiltag</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/availabilities"><span>Rådighed</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/dialogues"><span>Dialog</span></a>
    </li>
    <li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
        <a routerLink="/citizens/{{citizen.id}}/progressions"><span>E&P</span></a>
    </li>
</ul>

Please let me know if you need to see code snippets from my routing or components.

Yes, but with a bit of a work-around. We basically added a boolean property to our tab component named "active" and the manually handled this property upon routing, depending on behavior and expectations and with some CSS. Way too much work for some simple tab-highlighting but it works flawlessly. I recommend you to try and update to the latest version of Angular before creating such a work-around. :) — Casper Nybroe, Jun 28 '17 at 06:15
Your idea saved me. I also observed that the bootstrap4 navs do not add "show active" classes when I am using the navs inside the angular (v8) nested component. Once I take the same code one level up it was working. Finally, your idea saved me — Ashish Kumar Mondal, Feb 22 '20 at 15:26

score 0 · Answer 1 · answered Jun 26 '20 at 09:20

Seems your described behaviour still exists in Angular8.

A workaround might be not to use the "[routerLinkActive]" directive on your links, but instead to use the [ngClass] directive to set your active-class.

The condition is then checked via the router method "isActive()".

This approach saves you from adding additional properties in your component to keep your state up to date as mentioned in the comments to the question.

Your approach (excerpt):

<li routerLinkActive="active" [routerLinkActiveOptions]="{ exact: false }">
  <a routerLink="/citizens/{{citizen.id}}/journals"><span>Journal</span></a>
</li>

Workaround:

<li [ngClass]={'active': router.isActive('/citizens/' + citizen.id + '/journals', false)}">
    <a routerLink="/citizens/{{citizen.id}}/journals">Journal</a>
</li>

(Don't forget to inject the "Router" in your controller to use its public method)

Angular2 Router in nested tabs does not trigger active class when navigating

1 Answers1