Components: [Tabs] Two-way binding for tabs only work on initializing component

[aecz]

What is the expected behavior?

When changing the variable bind to selectedIndex, the active tab should change.

What is the current behavior?

The active tab stays the same.

What are the steps to reproduce?

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

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

@angular : 2.0.0
@angular/material : 2.0.0-alpha.9-3
Windows 7

[csabattilas]

is this in progress? if not I can take it. thanks

[csabattilas]

The issue with the plunkr example is that the tab is added after the setter for the selectedIndex kicks in so the setter becomes invalid. Any hint how to work around this? One idea I got is to save save the selectedIndex value and when the tab is added set it again. what do you think? thanks.

[csabattilas]

@jelbourn @andrewseguin you want me to take this one? thanks

[jelbourn]

@krigton: @andrewseguin is going to tackle this one

[csabattilas]

@jelbourn oki. i tackled a bit myself that's why i asked. any other issue you want me to address? thanks

[andrewseguin]

I've been looking into this and the issue can be resolved easily but we are running into a problem of syncing the animiations correctly. Will spend some more time on this today to see if we can come up with an ideal solution.

[csabattilas]

What you mean by synching the animations correctly?

[andrewseguin]

When a selection is made, it may be on a new tab. Often we'll see someone add a tab to their list of tabs and immediately want to select it. In this case, we want to have it animate it in from the left or right. Went through many iterations until I figured out how to do this. The difficult part is that the selectedIndex setter is handled by angular before the view's tabs are updated.

[PTC-JoshuaMatthews]

Still having this issue on beta2, beta3 won't build in webpack for me. Is there any workaround for this? Currently can't find any way to set selected tab programmatically which is frankly unacceptable for a tab control!

[AlanCrevon]

Same thing here :/

Edit : using master (02/05/2017)

EDIT 2 : PTC-JoshuaMatthews : it works using plain old [(selectedIndex)] :)

[PTC-JoshuaMatthews]

@AlanCrevon

I am on "@angular/material": "2.0.0-beta.2",

Using plain old [(selectedIndex)] does not work for me. Regardless of what it is set to the tab starts on the first tab. Right now have a hacky way of getting it done with a timeout that looks terrible.

setTimeout(() => {
switch (self.tabName) {
case 'default': self.tabGroup.selectedIndex = 0; break;
case 'othertab': self.tabGroup.selectedIndex = 1; break;
case 'othertab2': self.tabGroup.selectedIndex = 2; break;
case 'othertab3': self.tabGroup.selectedIndex = 3; break;
case 'othertab4': self.tabGroup.selectedIndex = 4; break;
}
}, 1000)

Why would my selected index binding not work the way you describe?

[AlanCrevon]

@PTC-JoshuaMatthews : Not sure what you are trying to do.

Here, my component has a class property selectedIndex : number = 0, which can be modified by any function such as :

selectNextTab(){
    this.selectedIndex++;
}

Then, my template uses <md-tab-group [(selectedIndex)]="selectedIndex">...</md-tab-group>

I hope it will help you :)

[PTC-JoshuaMatthews]

@AlanCrevon I am just demonstrating what I have to go through to use selectedIndex. I can set it after waiting for the control to instantiate (with the timeout) through a ViewChild instance. Binding to it the way you are describing is not working for me, the control ignores it.

[AlanCrevon]

@PTC-JoshuaMatthews sorry mate. Don't know how to help, then. :/

[walhow]

Would it be possible to get the material documentation (link below) updated for tabs, to include an example of programmatically setting the selected index? The plunkr referenced above no longer works.

https://material.angular.io/components/tabs/examples

[Sangameshwarpuramwar]

When a selection is made, it may be on a new tab. Often we'll see someone add a tab to their list of tabs and immediately want to select it. In this case, we want to have it animate it in from the left or right. Went through many iterations until I figured out how to do this. The difficult part is that the selectedIndex setter is handled by angular before the view's tabs are updated.

is this issue fixed?

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