Начать угловую анимацию, когда активна вкладка мата

Я пытаюсь анимировать простой div внутри вкладки. Содержимое вкладки — это другой компонент.

Родительский компонент:

<div class="content p-24">
  <mat-tab-group dynamicHeight="true">
      <mat-tab label="Info">
        <app-profile-editor *ngIf="editProfile" [user]= "user"></app-profile-editor>
        <app-profile-viewer *ngIf="!editProfile" [user]= "user"></app-profile-viewer>
      </mat-tab>
      <mat-tab label="Companies">
        <app-profile-companies></app-profile-companies>
      </mat-tab>
      <mat-tab label="People">

      </mat-tab>

  </mat-tab-group>

Чего я хочу добиться, так это анимировать div в компоненте app-profile-companies, когда я нажимаю на эту конкретную вкладку. Я не совсем уверен, как это сделать, я все еще учусь, а не эксперт по Angular.


person Marco Ripamonti    schedule 02.05.2019    source источник
comment
Я не уверен, что это сработает, но попробуйте, пожалуйста, и скажите мне. измените содержимое вашего mat-tab на шаблоны ng-template таким образом, ваши матовые вкладки загружаются лениво, и поэтому анимация должна отображаться при загрузке (они будут загружаться при нажатии на вкладку) ... подробнее здесь   -  person Francisco Santorelli    schedule 02.05.2019
comment
Он работает, но я его почти не вижу. Всякий раз, когда я переключаю вкладку, содержимое заикается из-за ленивой загрузки.   -  person Marco Ripamonti    schedule 02.05.2019


Ответы (1)


Я решаю эту проблему, добавляя ng-template для отложенной загрузки и отключая анимацию слайдов вкладок.

person Marco Ripamonti    schedule 07.05.2019