Ich versuche, eine Funktion zu erstellen, die am Ende einer Animation in Angular 2 ausgelöst wird (ich verwende das neueste Angular Cli).

ch war auf demAngular Animations Um zu verstehen, wie dies implementiert werden würde, indem der Auslöser in meinem Codebeispiel mit einem Rückruf versehen wird, habe ich eine Komponente, die auf der Seite animiert ist. Der Code lautet wie folgt:

//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.
 }

}

the html ist einfach ein div

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

Um ehrlich zu sein, ich kenne mich mit JavaScript nicht so gut aus. Jede Hilfe oder ein kurzes Beispiel würde mir helfen, Angular 2 besser zu verstehen.