Components: [Table] routerLinkActive receives wrong value after data is loaded to the table

[Nodarii]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

I expect [routerLinkActive] to be falsy after table loads data to <md-table> with [routerLink]'s in it.

What is the current behavior?

I put some links inside <md-table>;
I get link to rla on some of table parents like so #rla="routerLinkActive" ;
rla.isActive becomes true as soon as data appears in the table;

What are the steps to reproduce?

Here is working example (without table) http://plnkr.co/edit/P3KazCrx4vTsT4xnrtYM?p=preview
here is non-working example (with table) http://plnkr.co/edit/fEtD8teNak9HOjcziPsB?p=preview

What is the use-case or motivation for changing an existing behavior?

I guess it is clear based on the plunkrs above

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

@angular/cli: 1.2.7
node: 8.2.1
os: win32 x64
@angular/animations: 5.0.0-beta.2
@angular/cdk: 2.0.0-beta.8-5e3228f
@angular/common: 5.0.0-beta.2
@angular/compiler: 5.0.0-beta.2
@angular/core: 5.0.0-beta.2
@angular/flex-layout: 2.0.0-beta.8
@angular/forms: 5.0.0-beta.2
@angular/http: 5.0.0-beta.2
@angular/material: 2.0.0-beta.8-5e3228f
@angular/platform-browser: 5.0.0-beta.2
@angular/platform-browser-dynamic: 5.0.0-beta.2
@angular/platform-server: 5.0.0-beta.2
@angular/router: 5.0.0-beta.2
@angular/cli: 1.2.7
@angular/compiler-cli: 5.0.0-beta.2

Is there anything else we should know?

While writing plunkr I found that it works only when observable receives value with timeout.
So for example if you comment out tableData.datasource.ts:15,30 in (http://plnkr.co/edit/fEtD8teNak9HOjcziPsB?p=preview) it works just fine

[Nodarii]

I've tried to make plnkrs as stupid as it is possible. I hope it easy to understand the problem

[Nodarii]

I found workaround:

• Instead of fetching data in table datasource fetch it via router resolver
• Then component is rendered only when data is resolved
• Pass resolved data to datasource constructor and make connect method return Observable.of(this.resolvedData)

[andrewseguin]

Looks like you've uncovered a race condition present in the RouterLinkActive. I created an issue with reproduction here: https://github.com/angular/angular/issues/18983

In the meantime, you can call rla.update() manually to force an update to the router link active. Otherwise your workaround works too.

[Nodarii]

@andrewseguin thank you so much for investigating this stuff. Waiting for fix in angular

[mackelito]

I have the same issue when using the md-accordion.

<md-accordion> <md-expansion-panel routerLinkActive #rla="routerLinkActive" [expanded]="rla.isActive" *ngFor="let category of categoryList> <md-expansion-panel-header routerLink="{{category.slug}}">{{ category.name }}</md-expansion-panel-header> <md-nav-list> <a md-list-item *ngFor="let child of category.children" routerLink="{{child.slug}}" routerLinkActive="active">{{ child.name }}</a> </md-nav-list> </md-expansion-panel> </md-accordion>
[expanded] fails on load but works when user clicks the md-expansion-panel.. not really sure how I can use "rla.update()" for my usecase.. any pointers?

[Nodarii]

I did it with own method in the component, like:

  hasActiveSubRoute() {
    return !!this.route.children.length;
  }

and used it in the template like so

<md-drawer [opened]="hasActiveSubRoute()">

I guess it is not applicable for your case, so you will have to modify it a bit to pass 'rla' in this method and check it there

[mackelito]

hmm.. but If I pass the rla I end up in the same problem.. right?
If I add a 500ms delay I get the true value but that is not picked up by [expanded]

[Nodarii]

Is it fixed in https://github.com/angular/angular/commit/c569b7524974200040c2abae6923cd4e6f59a13b ?

[mackelito]

@Nodarii so this will be fixed in angular 5.. but Material does not yet support angular 5 right?

[mackelito]

@andrewseguin would you (or any one else) help me out on this one.. I would like to use rla.isActive to set expanded true/false on expansion panels but I fail to figure out a way to do so. I would need it to be done once the init of component is completed right?

[andrewseguin]

@mackelito Not sure off the top of my head here - best to ask on StackOverflow with a stackblitz showing what you want

[BenDevelopment]

I'm facing the same probleme. I'm trying to set my mat-expansion-panel to expanded when rla.isActive is true.

<mat-accordion>
    <mat-expansion-panel *ngFor="let category of mainMenu" #rla="routerLinkActive" routerLinkActive="active-link" [expanded]="rla.isActive">
        <mat-expansion-panel-header>
            <mat-panel-title>
                {{ category.label }}
            </mat-panel-title>
        </mat-expansion-panel-header>
        <mat-nav-list>
            <a *ngFor="let menuItem of category.items" mat-list-item [routerLink]="[menuItem.link]" routerLinkActive="active">
                {{ menuItem.label|| menuItem.habilitationKey }}
            </a>            
        </mat-nav-list>
    </mat-expansion-panel>
</mat-accordion>

But the panel are all closed on init and I cannot open them. When I click on one of them, there is a wierd animation like if it opens and closes instantally.
I cannot reproduce the bug on Stackblitz because I cannot find I way to import RouterModule, so I cannot use routerLink on Stackblitz.
Is this still a bug or am I missing something?

---

EDIT:

It works when I initialize my catagory list (mainMenu) in a timeout.

setTimeout(() => {
    this.mainMenu = this.getFilteredMainMenu(habilitations);
});

[angular-automatic-lock-bot[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._}