Puede deshabilitar la animación usando la propiedad @.disabled que se introdujo en angular 4.3.1 .

Agregue el siguiente código a su componente

 @HostBinding('@.disabled') disabled = true

o en tu html

 <div [@.disabled]="expression"></div>

Aquí está trabajando plnkr https://plnkr.co/edit/sVJM8H?p=preview

prueba esto:

 <mat-group [@.disabled]="true"> <mat-tab label="one">one</mat-tab> <mat-tab label="two">two</mat-tab> <mat-tab label="three">three</mat-tab> </mat-group>

Otro enfoque es un truco con navegación de ruta (busque un lugar más tarde para cambiar el valor devuelto)

 this.router.routeReuseStrategy.shouldReuseRoute = function() { return false; }; this.router.navigate(['your-page', nextTabIndex]);

Esto será lo mismo que la condición *ngIf pero también es importante definir un parámetro de ruta, por ejemplo, :tab

 { path: 'your-path/:tab', component: YourComponent }

Y, por supuesto, debe usar <route-outlet></route-outlet>

Y también sería bueno restaurar la pestaña actual en la recarga de la página

 tab: number = 0; constructor(public router: Router, public route: ActivatedRoute) {} ngOnInit() { this.tab = this.route.snapshot.params['tab']; } onTab(event: MatTabChangeEvent) { this.tab = event.index; this.router.routeReuseStrategy.shouldReuseRoute = function() { return false; }; const url = decodeURIComponent(this.router.url); this.router.navigate([url.substr(0, url.lastIndexOf("/")), event.index]); }

y en html

 <mat-tab-group [selectedIndex]="tab" (selectedTabChange)="onTab($event)"/>