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'"