An example of Angular 2 animation ended callback function

Question

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).

I have been on the Angular Anima

Answer 1

Now Angular2's supported (@animation.start) and (@animation.done) to tap into animation events.

For example, you can use (@routeAnimation.start)=onStart($event), (@routeAnimation.done)=onDone($event) in the first.component.html.

You can find out more at here.

Also you can see a simple example with the first.component.ts on Plunker.

Hope this help!

Answer 2

This is working example:

import {Component, NgModule, Input, trigger, state, animate, transition, style, HostListener } from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector : 'toggle',
  animations: [
    trigger('toggle', [
      state('true', style({ opacity: 1; color: 'red' })),
      state('void', style({ opacity: 0; color: 'blue' })),
      transition(':enter', animate('500ms ease-in-out')),
      transition(':leave', animate('500ms ease-in-out'))
    ])
  ],
  template: `
  <div class="toggle" [@toggle]="show" 
        (@toggle.start)="animationStarted($event)"
        (@toggle.done)="animationDone($event)"
     *ngIf="show">
    <ng-content></ng-content>
  </div>`
})
export class Toggle {
  @Input() show:boolean = true;
  @HostListener('document:click')
  onClick(){
    this.show=!this.show;
  }

  animationStarted($event) {
    console.log('Start');
  }

  animationDone($event) {
    console.log('End');
  }
}

@Component({
  selector: 'my-app',
  template: `
    <div>
      <toggle>Hey!</toggle>
    </div>
  `,
})
export class App {

}

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ App, Toggle ],
  bootstrap: [ App ]
})
export class AppModule {}

Plunker