CODEWITHSUNDEEP
angularangular2-animation
Gary Simon
Gary Simon

Reputation: 373

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.

Upvotes: 1

Views: 389

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657118

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.

Upvotes: 1

Related Questions