routerLinkActive.isActive not correct on pageLoad

[david-bulte]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

Consider the following markup in a navigation toolbar:

    <button mat-button class="nav-button"
            *ngFor="let item of navItems" [routerLink]="['/', item.name]"
            routerLinkActive="active-link"
            #rla="routerLinkActive" [disabled]="rla.isActive">
      {{item.name}} {{rla.isActive}}
    </button>

When the page loads, the "active-link" class is set for the "active route button". However, it's isActive property is false. After clicking a button, thereby changing the active route, the directive acts correctly.

Expected behavior

The routerLinkActive.isActive property should be true when the page loads.

Environment

Angular version: 6.0.8

Browser:
- [ x] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 

[kdubious]

@david-bulte isActive is true for me.

In my component:
navItems: Array<string> = ['index', 'test'];

In my HTML:

    *ngFor="let item of navItems" [routerLink]="['/', item]"
    routerLinkActive="active-link"
    #rla="routerLinkActive" [disabled]="rla.isActive">
    {{item}} {{rla.isActive}}
    </button>

When my index page loads, my index button has the active-link class applied, and is disabled.

How are you building your navItems? What exactly do you mean by a "navigation toolbar"?

[jasonaden]

I'm sorry but reported issues require a reproduction of the issue. We suggest using StackBlitz, Plunker or Github.

If this issue persists, please create a reproduction using one of the links above. Describe the difference between the expected and current behavior in a new issue with the reproduction linked.

[AVykhrystyuk]

I am having the same issue but for Angular: 6.1.9

<nav mat-tab-nav-bar>
    <a mat-tab-link
       *ngFor="let tab of tabs"
       [routerLink]="tab.urlCommands"
       routerLinkActive #rla="routerLinkActive"
       [active]="rla.isActive">
       <mat-icon class="title-icon">{{ tab.iconName }}</mat-icon> {{ tab.title }} {{ rla.isActive | json }}
    </a>
</nav>

[daniel-tabarcea]

So i had the exact same issue.

<a *ngFor="let link of paths"
[routerLink]="['/something', props.uid, link.path]"
routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
</a>

What i found was the the markup and the directives were initiating before props and paths where ready. So RouterLink was trying to match /something/undefined/undefined and of course it wouldn't work.
Fixed by adding a condition so the routes would initiate after the data is ready.

<ng-container *ngIf="props && paths">
(...)
</ng-container>

Also, ChangeDetectionStrategy.OnPush can cause the same symptoms

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}