How to delay each ngFor items animation

Question

how can i delay each item of *ngFor to animate one after another ?

i mean something like this:

<li *ngFor="let item of items"> //end result like below:
  <a [@flyIn]="'in'">first item</a> // delay 100ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 200ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 300ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 400ms and animate
  <a [@flyIn]="'in'">first item</a> // delay 500ms and animate
</li>

do i need to add items to items array at some interval or maybe there is some simplier way ?

Answer 1

This should now be possible in angular 4.2 (haven't tested it myself though). Following example is copied from this blog post:

Template code:

<div [@races]="races?.length">
  <button class="btn btn-primary mb-2" (click)="toggle()">Toggle</button>
  <div *ngFor="let race of races | slice:0:4">
    <h2>{{race.name}}</h2>
    <p>{{race.startInstant}}</p>
  </div>
</div>

Animation code:

trigger('races', [
  transition('* => *', [
    query(':leave', [
      stagger(500, [
        animate(1000, style({ opacity: 0 }))
      ])
    ], { optional: true }),
    query(':enter', [
      style({ opacity: 0 }),
      animate(1000, style({ opacity: 1 }))
    ], { optional: true })
  ])
])