Animate ngIf with Angular (v4+)

anim.component.ts

import { Component, OnInit, Input, OnDestroy } from '@angular/core';
import { expandCollapse } from './expandCollapse.animation';

@Component({
  selector: 'app-anim',
  animations: [expandCollapse],
  template: `
    <button (click)="toggle()">{{showText}}</button>
    <div *ngIf="show" [@expandCollapse]>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vestibulum bibendum justo sed posuere. Integer consequat nec nisi ac lacinia. Nulla a urna at risus tempus mattis a ut sapien. Mauris eleifend ornare nibh, a semper ligula hendrerit ut. Nullam sit amet elementum mauris, ac lobortis lacus. Cras vestibulum pellentesque ligula vel laoreet. Vivamus eget nibh consequat, viverra mi vel, commodo lectus. Donec cursus aliquam purus nec blandit. Etiam et pellentesque diam, at egestas nisl. Mauris faucibus non erat quis malesuada.</p>
      <p>Fusce sodales sollicitudin ex sit amet efficitur. Proin nisl dui, laoreet vel nisl eget, luctus ultrices nisl. Integer venenatis ipsum velit, eget molestie libero euismod et. Vivamus nec blandit urna. Nulla mollis non dui eget malesuada. Nunc venenatis ante ac luctus ultricies. Vestibulum at ex ac urna laoreet commodo. Vivamus feugiat vehicula diam, id egestas est pretium a. In id odio ligula. Donec dignissim turpis eu nisi sagittis, at tristique turpis vehicula. Etiam vel eros mi. Mauris semper velit sit amet sodales facilisis. Ut pharetra sapien non tellus cursus accumsan.</p>
      <p>Sed ut luctus urna. Phasellus ligula dui, maximus quis aliquam sit amet, suscipit in sem. Donec tincidunt magna sit amet laoreet mollis. Aliquam iaculis mattis est sed tristique. Nullam maximus vitae quam et mollis. Praesent nulla libero, facilisis non sagittis viverra, finibus vel lorem. Proin quis nisl a nisl congue pulvinar. Nulla facilisi. Nunc ut metus leo. Praesent felis felis, efficitur nec risus vel, interdum feugiat risus. Maecenas tristique vitae velit sodales rutrum. Fusce vel lobortis orci.</p>
    </div>
  `,
  styles: []
})
export class AnimComponent implements OnInit {
  show = false;
  showText = 'Show';

  constructor() { }

  ngOnInit() {
  }

  toggle() {
    this.show = !this.show;
    this.showText = this.show ? 'Hide' : 'Show';
  }

}

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { AnimComponent } from './anim.component';

@NgModule({
  declarations: [
    AppComponent,
    AnimComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

expandCollapse.animation.ts

import { trigger, transition, style, animate, state } from '@angular/animations';

export const expandCollapse = trigger('expandCollapse', [
  state('*', style({
    'overflow-y': 'hidden',
    'height': '*'
  })),
  state('void', style({
    'height': '0',
    'overflow-y': 'hidden'
  })),
  transition('* => void', animate('250ms ease-out')),
  transition('void => *', animate('250ms ease-in'))
]);