Is there a way to separately use the same animation on all the items generated by ngFor in Angular?

Question

So I have a div element which I loop over with ngFor and for each element I have some animation working.

The problem I'm having is that the animation works simultaneously on all the elements and I want it to work for one item at a time. Can anyone help me with this?

<div *ngFor="let product of products" @fadeIn>
    Something in here...</div>

Answer 1

If you want to add a delay before next element is animated, you can use the stagger method

Your code become :

HTML

<div [@fadeIn]="products.length">
  <div *ngFor="let product of products">
    Something in here...
  </div>
</div>

TS

trigger('fadeIn', [
  transition('* => *', [
    query(':enter', [
      style({ opacity: 0 }),
      stagger(100, [
        animate('0.5s', style({ opacity: 1 }))
      ])
    ])
  ])
])