Um exemplo de animação Angular 2 terminou a função de retorno de chamada

Estou tentando criar uma função que será acionada no final de uma animação no Angular 2 (estou usando o mais recente cli angular).

Eu estive noAnimações angulares Para entender melhor como isso seria implementado, atribuindo o gatilho com um retorno de chamada no meu exemplo de código, tenho um componente que é animado na página. o código é o seguinte:

//first.component.ts

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


@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css'],
  host: {
    '[@routeAnimation]': 'true',
    '[style.display]': "'block'",
    '[style.position]': "'absolute'"
  },
  animations: [
    trigger('routeAnimation', [
      state('*', style({transform: 'translateX(0)', opacity: 1})),
      transition('void => *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
      transition('* => void', animate(500, style({transform: 'translateX(100%)', opacity: 0})))
    ])
  ]
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {

  }

  myFunc() {
  // call this function at the end of the animation.
 }

}

o html é simplesmente uma div

<div class="w9914420">
  <h2>
     first-component Works!
  </h2>
</div> 

Para ser sincero, não estou muito familiarizado com JavaScript, portanto, qualquer ajuda ou um exemplo rápido me ajudaria a entender melhor o Angular 2.

questionAnswers(2)

yourAnswerToTheQuestion