I would like to change the default animation when scrolling left and right. Maybe a fade animation or something like that. I am trying to access to the MatTabNav to change or remove the default animation. And the I should define triggers for the new animation?
Any idea how can I achieve that?
component.ts
<nav mat-tab-nav-bar [backgroundColor]="background">
<a mat-tab-link *ngFor="let link of links"
(click)="activeLink = link"
[active]="activeLink == link"> {{link}} </a>
<a mat-tab-link disabled>Disabled Link</a>
</nav>
<button mat-raised-button class="example-action-button" (click)="toggleBackground()">
Toggle background
</button>
<button mat-raised-button class="example-action-button" (click)="addLink()">
Add link
</button>
component.html
import {Component} from '@angular/core';
import {ThemePalette} from '@angular/material/core';
import {MatTabNav} from '@angular/material/tabs';
/**
* @title Basic use of the tab nav bar
*/
@Component({
selector: 'tab-nav-bar-basic-example',
templateUrl: 'tab-nav-bar-basic-example.html',
})
export class TabNavBarBasicExample {
links = ['First', 'Second', 'Third'];
activeLink = this.links[0];
background: ThemePalette = undefined;
@ViewChild(MatTabNav) matTabNav: MatTabNav;
toggleBackground() {
this.background = this.background ? undefined : 'primary';
}
addLink() {
this.links.push(`Link ${this.links.length + 1}`);
}
}