angular - 元に戻した後、Angular アニメーションがマットタブ内で機能しない

Question

シンプルな :enter/:leave アニメーションをマットタブ内のマットリストで動作させようとしています。最初のアニメーションは問題ありません。別のタブに切り替えて最初のタブに戻ると問題が発生します。その際、アニメーションはトリガーされず、リストは非表示のままです。

別のタブに切り替えると、タブのコンテンツがDOMから削除されるため、リストが消えるのは理にかなっています。コンテンツを DOM に保持する方法や、アニメーションが再びトリガーされるようにする方法はありますか?

これは私の現在のテンプレートとコンポーネントです。Stackblitz の例も作成しました。

import { Component } from '@angular/core';
import { trigger, transition, style, sequence, animate} from '@angular/animations';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  animations: [
    trigger('fadeAndSlideTop', [
      transition(':enter', [
        style({opacity: '0', height: '0'}),
        animate('150ms ease-in', style({opacity: '1', height: '*'}))
      ]),
      transition(':leave', [
        animate('150ms ease-out', style({opacity: '0', height: '0'}))
      ])
    ])
  ]
})
export class AppComponent  {
  name = 'Angular';

  list = [
    {id: 1, text: 'Item 1'},
    {id: 2, text: 'Item 2'},
    {id: 3, text: 'Item 3'},
  ]
}

<mat-tab-group dynamicHeight="true">
    <mat-tab label="List">
        <h4>List examples</h4>
        <mat-action-list class="list">
            <button mat-list-item class="list-item" *ngFor="let item of list" [@fadeAndSlideTop]>
        <span>{{item.text}}</span>
        <mat-divider></mat-divider>
      </button>
        </mat-action-list>
    </mat-tab>
    <mat-tab label="Other things">
        <h2>Other things come here</h2>
    </mat-tab>
</mat-tab-group>

https://stackblitz.com/edit/angular-9-material-starter-sqsqgu?file=src/app/app.component.html

答え

したがって、Kavinda Senarathne の回答を使用した後、完全に機能するテンプレートになりました。

<mat-tab-group dynamicHeight="true">
    <mat-tab label="List">
    <ng-template matTabContent>
          <h4>List examples</h4>
          <mat-action-list class="list">
              <button mat-list-item class="list-item" *ngFor="let item of list" [@fadeAndSlideTop]>
          <span>{{item.text}}</span>
          <mat-divider></mat-divider>
        </button>
          </mat-action-list>
    </ng-template>
    </mat-tab>
    <mat-tab label="Other things">
        <h2>Other things come here</h2>
    </mat-tab>
</mat-tab-group>