Gary Simon Gary Simon - 13 days ago 8
AngularJS Question

Angular 2 Animation Callback .done, setting properties?

Let's say we have:

<li *ngFor="let item of items" [@myTrigger]='state' (@myTrigger.start)="animStart($event)" (@myTrigger.done)="animDone($event)">{{ item }}</li>


And method animDone:

animDetails: string;

animDone(event:any) {
console.log('Ended!');
this.animDetails = 'I am done!';
}


In the view I have
{{ animDetails }}


What's strange is while console.log('Ended!') fires appropriately, animDetails does not.

The first animation, nothing gets changed. The second animation (initiated by a click of a button), "I am done!" fires immediately, on start, as opposed to .done.

Answer

AFAIK animations run outside Angulars zone for performance reasons.

constructor(private cdRef:ChangeDetectorRef) {}

animDetails: string;

animDone(event:any) {
    console.log('Ended!');
    this.animDetails = 'I am done!';
    this.cdRef.detectChanges();
}

There was an issue about to run animation callbacks inside Angulars zone. I assume it was fixed already but your question seems to indicate otherwise, except when you're not using the latest Angular2 version.

Comments