Angular animations don't work inside mat-tabs after switching back when using custom components

Question

In a very similar situation to the issue Olafvv was observing here but running angular 16 and there's a slight nuance in my setup. I have a mat-tab-group containing a number of tabs. The issue I am observing is the same, in that my :enter animations does not work when navigating away from a mat-tab, and then back to that same mat-tab. The difference for me is that my animation is for a custom sub-component within one of my app-MyTabContentComponents and so it's not easy to just drop in the ng-template.

I tried the accepted answer from Olafvv's question, but could not find out where to put the <ng-template matTabContent to enable the lazy loading (and therefore the re-triggering of the :enter). I tried locating it:

1. Within the mat-tab around my <app-MyTabContentComponentX elements, but this resulted in an odd animation where the height of tab 1 reduced to zero, but masking tab 2.
2. As the encasing HTML element within the html of each MyTabContentComponentX component.
3. I also tried just using the directive on the MyTabContentcomponentX elements, but clearly it's tied to the ng-template class, as this didn't render anything at all!

Here's the HTML in question, and the component the animation is not working on is contained within MyTabContentComponent3. To reiterate - the animation works fine the first time the tab is opened.

<mat-tab-group class="mat-tab-group" mat-stretch-tabs="false" mat-align-tabs="start" dynamicHeight="true">
  <mat-tab label="Tab 1"> 
    <app-MyTabContentComponent1></app-MyTabContentComponent1>
  </mat-tab>
  <mat-tab label="Tab 2"> 
    <app-MyTabContentComponent2></app-MyTabContentComponent2> 
  </mat-tab> 
  <mat-tab label="Tab 3"> 
    <app-MyTabContentComponent3></app-MyTabContentComponent3> 
  </mat-tab>
  <mat-tab label="Tab 4">  
    <app-MyTabContentComponent4></app-MyTabContentComponent4> 
  </mat-tab>
</mat-tab-group>

How can I get this animation to work each time the tab is selected?

Answer 1

The correct way is wrap your components in <ng-template matTabContent></ng-template>:

<mat-tab-group
  class="mat-tab-group"
  mat-stretch-tabs="false"
  mat-align-tabs="start"
  dynamicHeight="true"
>
  <mat-tab label="Tab 1">
    <ng-template matTabContent>
      <app-MyTabContentComponent1></app-MyTabContentComponent1>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 2">
    <ng-template matTabContent>
      <app-MyTabContentComponent2></app-MyTabContentComponent2>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 3">
    <ng-template matTabContent>
      <app-MyTabContentComponent3></app-MyTabContentComponent3>
    </ng-template>
  </mat-tab>
  <mat-tab label="Tab 4">
    <ng-template matTabContent>
      <app-MyTabContentComponent4></app-MyTabContentComponent4>
    </ng-template>
  </mat-tab>
</mat-tab-group>

Odd animation is caused by dynamicHeight, try to remove it:

<mat-tab-group
  class="mat-tab-group"
  mat-stretch-tabs="false"
  mat-align-tabs="start"
>
...
</mat-tab-group>