[Tabs] Add ability to disable animations

[alexciesielski]

Bug, feature request, or proposal:

Feature request

What is the expected behavior?

I would like to disable the slide-in animation

What is the current behavior?

The slide-in animation cannot be disabled.

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

I have a couple of tabs, which are rendered using *ngFor.

The data is retrieved from ngrx/store and upon any change of state, the tabs get rerendered and slide-in again, which sucks for UX.

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

@angular/material: 2.0.0-beta.1

[fxck]

Have you tried adding trackBy to that *ngFor?

[alexciesielski]

Yes but it works only partially.

I have a nested md-tab-group (one inside the other) and the trackBy helps on the parent md-tab-group.
The inner tab-group still gets rerendered on every change.

[fxck]

Even if you put trackBy on both?

[alexciesielski]

Yes, even with two trackBys

<md-tab-group>
    <md-tab [label]="group.name" *ngFor="let group of groups | async; trackBy group?.id">

        <md-tab-group>
            <md-tab [label]="table.name" *ngFor="let table of group.tables; trackBy table?.id">

                <!-- ... -->

            </md-tab>
        </md-tab-group>

    </md-tab>
</md-tab-group>

I work with ngrx and the table gets rebuilt and sorted on every change, will have to rethink my data structure.

In the meantime it would just be easier to disable the animation though.

[alexciesielski]

Ok my bad, I have been googling trackBy a little more and I implemented it incorrectly.
I've changed the group?.id to trackByFn and in my controller I have:

trackByFn(index, item) { return item.id; }

The tabs don't get rerendered anymore, thanks.

[mateuszwitkowski]

Anyone knows how can I turn those animations off? I have "heavy" content inside tabs . It is fetched (and need to be fetched) from backend one every switch between tabs. Without animations it worked well but now it jam and freeze. I thought I could overrie CSS styles but it's defined inside Component decorator in tab-body.

[BrunnerLivio]

My workaround for this, for AngularJS:

<md-tabs md-dynamic-height md-border-bottom md-selected="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
</md-tabs>
<section ng-if="selectedIndex === 0">ONE</section>
<section ng-if="selectedIndex === 1">TWO</section>
<section ng-if="selectedIndex === 2">THREE</section>

[sharpevo]

@BrunnerLivio Awesome, I made some changes for the new version:

<md-tab-group [(selectedIndex)]="selectedIndex">
    <md-tab label="one"></md-tab>
    <md-tab label="two"></md-tab>
    <md-tab label="three"></md-tab>
</md-tab-group>
<section *ngIf="selectedIndex === 0">ONE</section>
<section *ngIf="selectedIndex === 1">TWO</section>
<section *ngIf="selectedIndex === 2">THREE</section>

[MikeInSwitzerland]

Yup, it's a bit bizarre that this option wasn't provided. It looks great the first time you see the animation, but soon drives you mad...

[m98]

@jelbourn
Any progress on this feature request? I don't mean trick, something like animation="false"

[VasilenkoAlex]

+1.
I encountered need for animation switch when i tried to put element with fixed position into md-tab-body. In latest chrome fixed position will not work if any of parent elements have transform CSS property.