MdTab isActive ExpressionChangedAfterItHasBeenCheckedError

[hallids]

Bug, feature request, or proposal:

Bug - when using *ngIf inside a tab, in conjunction with MdTab.isActive, an ExpressionChangedAfterItHasBeenCheckedError is printed to the console when switching tabs. The functionality is correct however (i.e. the ngIf and tabs work as they should.)

What is the expected behavior?

No ExpressionChangedAfterItHasBeenCheckedError error is printed to the console.

What is the current behavior?

Error is printed to the console:

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'.

What are the steps to reproduce?

http://plnkr.co/edit/SotTRsV9iLhvH95VmS0Y?p=preview

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

N/A

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

Angular: 4.3.6
Material: 2.0.0-beta.10
Typescript: 2.3.4
Browser: Chrome Version 60.0.3112.113
OS: Windows 10

Is there anything else we should know?

No.

[RaphyLi]

Same problem when use isActive

[josephperrott]

This is working as expected as you are using a relying on a value upstream in change detection.

The value of isActive is already checked when change detection runs for the content of your tab before the isActive value is updated in the MdTab.

[hallids]

That seems to contradict #6422 where a very similar example was given in a feature request, and in resulted in a pull request which was then merged.

[abeninski]

@josephperrott any idea how to fix the issue or workaround it? Seems like a pretty straight forward use case.

[paullryan]

@josephperrott please look at the comment by @hallids following this one, this results in an odd workaround. This does not seem to satisfy the requirements from #6422 so is a valid bug in the implementation of this flag.

[Marshal27]

Issue still closed however, I just ran into this problem. Unfortunately I am not able to assign a variable in my component based on selected index then statically do a Boolean check in the *ngIF based on said index value as I will never know how many tabs I may have; they are generated by an *ngFor dynamically.

if anyone has a workaround for this please share as the selectedTabIndex === 0 etc will not work for me. Having *ngIf="mdTab.isActive" without throwing this error would make life a lot easier.

[nikosgpet]

@josephperrott As @paullryan said this does not seem to satisfy the requirements from #6422 so is a valid bug in the implementation of this flag.

[xjuanc]

Just ran into this problem aswell, any workaround so far? As others stated this do seems like a valid bug since the basic example on #6422 throws this error.

[RoshanRoyal]

+1

[mattiacorci]

I'm still getting the same error using version 6.4.7

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