CODEWITHSUNDEEP
angulartabsangular-material2
Ryan Anderson
Ryan Anderson

Reputation: 81

Angular Material 2 Tabs: Removing body transition

By default, the tab content in Material 2 for Angular 2 slide from side to side. Is there a way to alter or disable the transition, while keeping all of the features (such as the ability to put html in the label, and the clean template syntax)?

I am currently using this workaround, which I hate, but I will leave here in case anybody else benefits from it:

component.html:

<md-tab-group [selectedIndex]="selectedIndex"
 (selectChange)="changeSelectedIndex($event)">
    <md-tab>
      <template md-tab-label>
        1
      </template>
    </md-tab>
    <md-tab>
      <template md-tab-label>
        2
      </template>
    </md-tab>
</md-tab-group>

<div *ngIf="selectedIndex===0">
  Body for 1
</div>
<div *ngIf="selectedIndex===1">
  Body for 2
</div>

component.ts (you need a different selectedIndex and changeSelectedIndex for each tab group):

selectedIndex: number = 0;

changeSelectedIndex(event) {
  this.selectedIndex = event.index;
}

Upvotes: 2

Views: 2155

Answers (1)

Manjeet
Manjeet

Reputation: 51

Add:

[@.disabled]="true"

To the HTML to disable the animation transition.

Upvotes: 5

Related Questions