Tab group does not change "selectedIndex" when programmatically changed

[neelchanda]

Bug, feature request, or proposal:

mat-tab-group is unable to update according to selectedIndex variable after view

What is the expected behavior?

mat-tab-group should update and show correct tab index based on the variable set

What is the current behavior?

mat-tab-group stays on the originally selected tab regardless of how many times the variable is changed.

What are the steps to reproduce?

See Angular Material Tab example documentation (https://material.angular.io/components/tabs/examples)

When selecting the checkbox to "Select tab after adding", after clicking "Add new tab", the tab stays on the original tab.

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

Would like to programmatically change selected index for an angular material automated text carousel/slideshow type behavior.

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

Angular 6

Is there anything else we should know?

[devversion]

Good catch. I noticed that today as well while having a look at the Dynamic tabs demo. Also the title of the example seems to mention tags instead of tabs (#12229 (comment))

[dmacfarlane]

Duplicate of #12038?

[Auricopter]

Bug seems to occur since #9132
Please fix ASAP.
Btw. how do i revert a specific commit in the Material node module?

[gagandeepbal]

any update on this issue?

[mhosman]

This is still happening

[devversion]

@mhosman Based on my testing and the example on material.angular.io, the issue has been successfully resolved. Please consider creating a new issue with a demo that shows that the issue is still happening.

[bjanisAssure]

I'm kind of a newbie to Angular but I believe the problem happens when you try to apply the selected index while the rendering is going on. In the demo the selected index is changed in an if statement. The way I fixed this was to put the instruction in a timeout.

setTimeout(() => { this.selectedTab.setValue(this.events.length - 1) }, 0);

[gagandeepbal]

@mhosman i just tested this with newer update 6.4.5 and it is working fine even without setTimeout().

[FARHANE]

[(selectedIndex)]="selectedIndex" -> not working
<mat-tab-group #soTabs> soTabs.selectedIdex=4 --> not working

[DanielNetzer]

having the exact same issue on version 6.4.7, downgraded to 6.4.5 and yet the issue persist.
trying using [(selectedIndex)], tabs reference. nothing worked.

eventually resorted to using

  this.selectedTabIndex = index;
  this.cdRef.detectChanges();

[congxinUSC]

Encountered the same "bug" but it turned out that instead of requiring a fix, adopting @DanielNetzer 's solution might be the way to go.

My reason for this is that by looking at mat-tab's implementation, the change of selectedIndex is not counted as a change during component change detection (seen here). I suppose this is actually the desired behavior since the tab groups are more aimed to respond to users direct interaction.

The reason for some of you reported to see the tabs correctly changed is most likely that there are other parts of your components have some changes associated with the change of selectedIndex (say the index number in the official examples) which are detected in the lifecycle.

I haven't carry out the full test to verify these yet but almost positive about it based on previous observations during development.

[Andrey-Pavlov]

Why selectedIndex is ignored after a user clicks on any tab?
selectedIndex="<any_tab_number>" doesn't change the active tab after this.

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