[Tabs] Interrupt / Intercept tab change

[luchillo17]

Bug, feature request, or proposal:

If possible, i want to intercept tab change, i know i have the MdTabChangeEvent through MdTabGroup's selectChange binding, but it only seems to show which tab is it transitioning to, how do i stop the transition of happening?

What is the expected behavior?

I want a way to call a function, make some logic in function and then if i want, stop the tab from happening, or even change to a different tab, my case is that the last tab should be a +, and on click it should add a new tab instead of transitioning to that empty tab.

What is the current behavior?

Can't find a way to intercept the transition of tabs.

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

Using tabs for a step based process, or just having a + tab made for the sole purpose of adding more tabs, not showing that tab.

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

material@2.0.0-alpha.10

Is there anything else we should know?

Idk if it exists or it lacks the feature itself, i guess that for the moment i'll need to let it transition to the empty tab, add the new tab and then transition to the created tab.

[Daeluse]

Slightly related to #2008, if we could bind to an EventEmitter output by the tab group which provides us the current tab, and the target tab, we would then probably only need a way to stop the index from changing.

[luchillo17]

@Daeluse is basically the same, though different use cases and different ways of saying it.

[luchillo17]

Ok so i've been testing and i am able to create a tab, set the tab i want to go with selectedIndex binding, and it happens so fast that i doesn't even notice the + tab being shown, like this:

<md-tab-group
  [selectedIndex]="currentTabIndex"
  (selectChange)="tabChanged($event)"
>
  <md-tab *ngFor="let order of orders; let i = index; trackBy: trackByIndex" [label]="i + 1">
    <order
      [index]="i"
      [cashier]="cashier"
    ></order>
  </md-tab>

  <md-tab
    label="+"
    (click)="newOrder()"
  ></md-tab>

</md-tab-group>

  tabChanged(event: MdTabChangeEvent) {
    console.log('Tab Changed: ', event);
    let textLabel = event.tab.textLabel.toString();
    if (textLabel.includes('+')) {
      this.newOrder();
      this.currentTabIndex = this.orders.length - 1;
    }
    return false;
  }

However this is kind of a hack, @Daeluse what do you think about it?

[MikeMatusz]

I like the concept of a guard in #2008 (though not necessarily relying on angular/router) because you could do something asynchronous, like prompt the user, before continuing or preventing the tab change. Most tab libraries I've used have an event you can preventDefault on to stop the change, but it's messy with async because you have to stop the transition, and then start it again, suppressing your deactivate logic with some kind of state variable, if the user clicks Continue (or the async validation succeeds).

[luchillo17]

A guard is not exactly what i need, but it could work as well, intercepting the event before the animation happens is basically the same concept.

Lacking this feature limits a lot what tabs are really capable of.

[dlang117]

Any update on this? Or a workaround for actually preventing the tab index from changing?

[luchillo17]

I haven't been very active on this one since i found a hack for my use case, i just set the index after the change so fast that you never notice it has gone to the + tab & back, does that work in your use case or not?