Angular 2 animate element generated by ngFor

Question

I am new to animations in Angular 2 so I might be missing something obvious, but how do I animate elements generated by an *ngFor loop? It seems like the animations are tied to a component and have to be defined in the @Component decorator?

Is the only solution to create a inner component and have that being created in the *ngFor and then animate that?

Answer 1

Here is an example of a fade-in animation for elements generated in a *ngFor loop.

my.component.ts

@Component({   selector: ...,   templateUrl: 'my-component.html',   styleUrls: ...,   animations: [     trigger('fadeIn', [       transition(':enter', [         style({ opacity: '0' }),         animate('.5s ease-out', style({ opacity: '1' })),       ]),     ]),   ], }) 

my-component.html

<div *ngFor="let item of myArray" @fadeIn>I'm an Item</div> 

NB: If you want to use an animation with a specific state, you should bind the state like this:

[@myAnimation]="'myState'" 

Answer 2

Here is an example of both fade-in and fade-out animation based on Ploppys answer.

@Component({   selector: ...,   templateUrl: 'my-component.html',   styleUrls: ...,   animations: [         trigger('inOutAnimation', [             state('in', style({ opacity: 1 })),             transition(':enter', [style({ opacity: '0' }), animate('.5s ease-out', style({ opacity: '1' }))]),             transition(':leave', [style({ opacity: '1' }), animate('.5s ease-out', style({ opacity: '0' }))]),         ]),     ], }) 

<div *ngFor="let item of myArray" [@inOutAnimation]="'in'">