Angular 2 animated element created by ngFor

Question

I'm new to animation in Angular 2, so I might miss something obvious, but how can I animate elements generated by a * ngFor loop? It seems that the animations are bound to the component and should be defined in the @Component decorator?

Is the only solution to create an internal component and create this in * ngFor and then animate it?

Answer 1

The following is an example of a fading animation for elements generated in a *ngFor .

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 [@fadeIn]="''" *ngFor="let item of myArray">I'm an Item</div> 

NB: we do not use states for our animation, therefore an empty line for state is not needed. (it works just with: [@fadeIn] )

NB: even if the application has “no components”, it still has app.component.ts in which you can do this.