Mat Tab breaks animation state by setting to void

[jimmyzzxhlh]

What is the expected behavior?

When Child components of mat-tab have angular animation, the state of the animation should not be affected by switching tabs.

What is the current behavior?

When child components of mat-tab have angular animation, switching tabs will cause the state of the animation to be set to void, thus breaking the UI of the child components.

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-d8fjgg In the demo, we have 3 states, expanded state will expand the div height to 300px, collapsed state will collapse the div height to 30px, and void state will set the div height to 150px. Switching tabs will always reset the div height to 150px, regardless of what the actual current state is.

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

Angular 7.0.1

[epuentes]

I'm seeing this same behavior with mat-tab.

MacOS Mojave 10.14.4 Safari 12.1 (14607.1.40.1.4) and Google Chrome 73.0.3683.86 (Official Build) (64-bit) Angular CLI: 7.3.3 Node: 8.11.3 OS: darwin x64 Angular: 7.2.6

Package Version

@angular-devkit/architect 0.13.3 @angular-devkit/build-angular 0.13.3 @angular-devkit/build-optimizer 0.13.3 @angular-devkit/build-webpack 0.13.3 @angular-devkit/core 7.3.3 @angular-devkit/schematics 7.3.3 @angular/animations 7.2.7 @angular/cdk 7.3.3 @angular/cli 7.3.3 @angular/material 7.3.3 @ngtools/webpack 7.3.3 @schematics/angular 7.3.3 @schematics/update 0.13.3 rxjs 6.3.3 typescript 3.2.4 webpack 4.29.0

[ghost]

I faced this issue too. As a temporary solution, I used directive [matTabContent] so components inside tabs now reload every time and animation states now pristine and fine.

From docs:

<mat-tab-group>
  <mat-tab label="First">
    <ng-template matTabContent>
      Content 1 - Loaded: {{getTimeLoaded(1) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Second">
    <ng-template matTabContent>
      Content 2 - Loaded: {{getTimeLoaded(2) | date:'medium'}}
    </ng-template>
  </mat-tab>
  <mat-tab label="Third">
    <ng-template matTabContent>
      Content 3 - Loaded: {{getTimeLoaded(3) | date:'medium'}}
    </ng-template>
  </mat-tab>
</mat-tab-group>

[diosney]

Still happens with 8.1.4.

Don't want to use @ghost solution since in my case it is not visually appealing.

I'm going to test if a pure CSS animation do work in this case.

[diosney]

Well, with simple CSS animations worked like a charm, although I prefer to have them with Angular animations :/

[sqljim]

There's a better way that solves this problem, and it's to style the void state. You can read more about it here:

state("void", style({ display: "none", height: "0px", })),

[Frankitch]

@sqljim, could you elaborate on your solution? I'm facing the same issue and I've tried your suggestion on @jimmyzzxhlh stackblitz but it does not work either.

What I observe is that leaving tab A for tab B triggers transition of tab A animations to the void state and coming back to tab A does not trigger anything, animations of tab A are still in the void state...

NB : the workaround with [matTabContent] works but I'd prefer a neater solution.

[Mintenker]

This is still happening, and it's causing quite a bit of trouble. Any update?