Angular 2 Animation Callback .done, setting properties?

Question

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.

Günter Zöchbauer · Accepted Answer · 2016-11-19 15:35:41Z

1

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.

answered Nov 19, 2016 at 15:35

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Gary Simon Over a year ago

Ah! I'm using the Angular 2 quickstart for this particular example. Could that be why? By the way, I see your name everywhere in Angular 2. Great job!

Günter Zöchbauer Over a year ago

Thanks. What do you mean with "quickstart"? angular.io/docs/ts/latest/quickstart.html? It seems to be using the latest version. The issue was fixed 10 days ago. It might not be included in the latest release. github.com/angular/angular/issues/11881

Collectives™ on Stack Overflow

Angular 2 Animation Callback .done, setting properties?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related