title: An example of Angular 2 animation ended callback function
body: <p>I am trying to create a function that will be triggered at the end of an animation in Angular 2 (I am using the latest angular cli).</p>
  
  <p>I have been on the <a href="https://angular.io/docs/ts/latest/guide/animations.html#!#animation-callbacks" rel="noreferrer">Angular Animations</a> to gain some understanding of how this would be implemented by assigning the trigger with a callback
  in my example of code I have a component that is animated onto the page. the code is has follows:</p>
  
  <pre class="lang-js prettyprint-override"><code>//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 =&gt; *', [style({transform: 'translateX(-100%)', opacity: 0}),animate(500)]),
        transition('* =&gt; 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.
   }
  
  }
  </code></pre>
  
  <p>the html is simply a div</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;div class="w9914420"&gt;
    &lt;h2&gt;
       first-component Works!
    &lt;/h2&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>To be honest I am not too familiar with JavaScript so any help or a quick example would help me gain a better understanding of Angular 2.</p>