1

I'm trying to animate a simple div inside a tab. The content of a tab is a different component.

Parent component:

<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>

What i want to achieve is animating a div in the app-profile-companies component when I click on that specific tab. I am not really sure how to do this, I'm also still learning and not that expert with Angular yet.

Marco Ripamonti
  • 77
  • 2
  • 12
  • I am not sure this will work, but do try please, and tell me. change your `mat-tab`'s content to templates `ng-template` this way your mat tabs are lazy loaded, and therefore the animation should appear on load (they will be loaded on tab click) [...more info here](https://material.angular.io/components/tabs/overview#lazy-loading) – Francisco Santorelli May 02 '19 at 15:12
  • 1
    It does work, but I can hardly see it. Whenever I change tab there is a stuttering in the content because of the lazy load. – Marco Ripamonti May 02 '19 at 15:54

1 Answers1

0

I solver this issue by adding ng-template for the lazy loading and disabling the tab slide animation.

Marco Ripamonti
  • 77
  • 2
  • 12