Reproducing material tab with Angular animations

I am trying to reproduce the Angular Material MatTab behavior with one component, using Angular animations. I would the div parent to smoothly adapt his height when the tab content is changed.

I tried the following :

<div>
  <a (click)="tabState = 'tab1'">Tab 1</a>
  <a (click)="tabState = 'tab2'">Tab 2</a>
  <a (click)="tabState = 'tab3'">Tab 3</a>
</div>
<div [@tabs]="tabState">
  <div [ngSwitch]="tabState">
    <div *ngSwitchCase="'tab1'">Content 1A</div>
    <div *ngSwitchCase="'tab2'">Content 1B<br/>Content 2B</div>
    <div *ngSwitchCase="'tab3'">Content 1C<br/>Content 2C<br/>Content 3C</div>
  </div>
</div>

and my TS file :

trigger('tabs', [
    state('closed', style({ height: 0 })),
    state('tab1',   style({ height: '*' })),
    state('tab2',   style({ height: '*' })),
    state('tab3',   style({ height: '*' })),
    transition('* => *', [
      animate('0.2s ease-in-out')
    ])
  ]
])

But it seems to work only for transitions with closed state, not between tabs with auto height. Any thought about this is very welcome.

Source: New feed
Source Url Reproducing material tab with Angular animations