[Tabs] Data binding that references the isActive property of a MatTab results in an ExpressionChangedAfterItHasBeenCheckedError

[rachelrosengoogle]

Bug, feature request, or proposal:

Bug: Data binding that references the isActive property of a MatTab results in an ExpressionChangedAfterItHasBeenCheckedError on the initial load of the app, and every time one navigates to or away from the tab for which the value is being used.

What are the steps to reproduce?

Here's a stackblitz that reproduces the issue:
https://angular-issue-tabs-expressionchangedafterithasbeenchecked.stackblitz.io

The error appears on the initial load and when switching tabs.

To repro you need a mat-tab-group with two or more tabs, and another component which has a property referencing the isActive property of one of the tabs:

<mat-tab-group>
<mat-tab #firstTab [label]="'Tab 1'">
<div class="content"></div>
</mat-tab>
<mat-tab [label]="'Tab 2'">
<div class="content"></div>
</mat-tab>
</mat-tab-group>

<foo-component [myProperty]="firstTab.isActive"></foo-component>

This results in the error: "Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'myProperty: false'. Current value: 'myProperty: true'"

This initial error can be fixed by waiting for the MatTabGroup to be initialized before binding to myProperty, but the error also happens when navigating between tabs.

[rachelrosengoogle]

Hi. Thanks for making the PR! I was wondering if there is any update on this? This is blocking us from writing tests for our components with tabs, since the ExpressionChangedAfterItHasBeenCheckedError causes tests to fail. Happy to help in any way I can.

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