Angular 2 callback function completion example

Question

I am trying to create a function that will run at the end of an animation in Angular 2 (I am using the latest version of angular cli).

I was at Angular Animations to get some insight into how this would be implemented by assigning a trigger with a callback in my code example. I have a component that animates on a page. The code has the following:

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

HTML is just a div

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

Honestly, I'm not too familiar with JavaScript, so any help or quick example will help me better understand Angular 2.

Answer 1

This is a 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

Answer 2

Angular2 now supports (@animation.start) and (@animation.done) for connecting to animation events.

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

You can find out more here .

You can also see a simple example with first.component.ts on Plunker .

Hope this helps!

Answer 3

But what if we use HostBinding ???

 @HostBinding('@ourAnimate') get ourAnimate() { return this.opened ? 'open' : 'closed'; } 

How can we catch the state "@ ourAnimate.done" and then run another function, for example? Please help