Components: [Mat-Tab] Cannot read property 'name' of undefined when use isActive Tab in component

[RaphyLi]

Bug:

I create a MatTabGroup with three tab. And in each tab I want use isActive but it doesn't work.

ERROR TypeError: Cannot read property 'name' of undefined

What are the steps to reproduce?

https://stackblitz.com/edit/angular-hu2qnh
https://angular-hu2qnh.stackblitz.io

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

Angular 5.2.2
Material 5.1.0
Chrome 63

[crisbeto]

The tabs don't refer to any name properties at all. This seems like it might be something wrong in your code.

[RaphyLi]

Yes, I know. But the error don't from tabs code but core material

MainTabsComponent.html:2 ERROR TypeError: Cannot read property 'name' of undefined
at checkBindingNoChanges (core.js:9902)
at checkNoChangesNodeInline (core.js:13955)
at checkNoChangesNode (core.js:13925)
at debugCheckNoChangesNode (core.js:14754)
at debugCheckDirectivesFn (core.js:14656)
at Object.eval [as updateDirectives] (MainTabsComponent.html:3)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14638)
at checkNoChangesView (core.js:13763)
at callViewAction (core.js:14116)
at execComponentViewsAction (core.js:14068)

[andrewseguin]

@RaphyLi, I'm not sure why Stackblitz is issuing that particular error, but if you load up your example in a real app you'll see that this error is our friend, ExpressionChangedAfterItHasBeenCheckedError.

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

The reason you are seeing this is because you are passing isActive as an input to your test component, but that isActive input is changing during change detection. Specifically, that value is set to true during the tab group's content check. Angular doesn't like it when an input changes during change detection.

To resolve this, you'll want to be in control of the inputs you pass to your components. Here's one approach you can take: https://stackblitz.com/edit/angular-lwd4rv?file=app%2Ftabs%2Ftabs.component.html

In that example, we set up a variable selectedTabIndex that starts as 0 but changes whenever the tab group outputs a selectedIndexChange. The key here is that the value change occurs outside of any of Angular's change detection lifecycle hooks.

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