Components: OnPush change detection breaks mat-tab initial active state

[klemenoslaj]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Depending on the current route, active tab should be correctly highlighted, the same way as with the default change detection.

What is the current behavior?

With OnPush change detection enabled, tab do not get highlighted at all.

What are the steps to reproduce?

Broken example (OnPush):
https://stackblitz.com/edit/angular-igavey

Working example (Default):
https://stackblitz.com/edit/angular-dfqftg

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

Angular CLI: 6.0.8
Node: 8.11.2
OS: darwin x64
Angular: 6.0.4
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

Package Version

@angular-devkit/architect 0.6.8
@angular-devkit/build-angular 0.6.8
@angular-devkit/build-ng-packagr 0.6.8
@angular-devkit/build-optimizer 0.6.8
@angular-devkit/core 0.6.8
@angular-devkit/schematics 0.6.8
@angular/cdk 6.2.1
@angular/cli 6.0.8
@angular/material 6.2.1
@ngtools/json-schema 1.1.0
@ngtools/webpack 6.0.8
@schematics/angular 0.6.8
@schematics/update 0.6.8
ng-packagr 3.0.1
rxjs 6.2.0
typescript 2.7.2
webpack 4.8.3

[LayZeeDK]

Workaround in StackBlitz

Any help on turning this into a directive would be much appreciated.

[mkollers]

I've got exactly the same issue. Changing the ChangeDetection-Strategy of my AppComponent to Default is out of the question. Thanks @LayZeeDK for the workaround, but it would be great to see a solution in the material framework.

[manklu]

@klemenoslaj
I added the value of rla.isActive to the label and as you can see it's false for both tabs.
Seems there is a problem with your use of routerLinkActive and OnPush.

https://stackblitz.com/edit/angular-28rbpe?file=src/app/example/example.component.html

Not much that material can do here.

[klemenoslaj]

@manklu, sure they are both false, but that is the problem isn't it?
Look at the URL: example/home - we are navigated to home route, but routerLinkActive of given path is anyway false, while it should be true since it's routerLink is the actual URL.

Possibly we have a misunderstanding though.

[manklu]

@klemenoslaj isActive is initialized after the link is rendered for the first time. And because routerLinkActive doesn't trigger change detection, nobody tells the component that an update is necessary.

[klemenoslaj]

@manklu, yes that is in fact true :+1:
However, what is the alternative then here? Should we work around material and trigger it manually?
One reasonable thing would be that routerLinkActive exposes an observable, so we could use async pike to trigger change detection.

[klemenoslaj]

@manklu there is as well a very similar issue opened in Angular repo, pointing to a regression.

[sir-captainmorgan21]

@LayZeeDK your solution works, but there is an easier one. Instead of having a flag and flipping it to true AND then call this.changeDetector.detectChanges you can just do the following:

ngAfterViewInit() {
    this.changeDetectorRef.markForCheck();
}

Easy work around and it works like a charm.

[LayZeeDK]

I don't get it, @sir-captainmorgan21. Could you fork my StackBlitz and change it to your approach?

[devsull]

I'm having this issue too... here's the hacky solution to how I got the behavior I wanted: https://stackoverflow.com/a/60064696/2839746

[klemenoslaj]

This issue seems to be fixed for me. Related issue https://github.com/angular/angular/issues/19934 was resolved with https://github.com/angular/angular/commit/80d0067048e4568cb20ddf898122984d19e35707.

Anyone still has problems, or can we close this?

[andrewseguin]

Will close for now - if this becomes an issue again please feel free to re-open an issue. Thanks for following up

[LayZeeDK]

Probably fixed by the commit you mentioned which also fixed this long-standing issue https://github.com/angular/angular/pull/21411

[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._}