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

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

[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);
});

[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