Staggering Angular2 animations within *ngFor

Question

I\'ve been digging around the Angular2 documentation and there doesn\'t seem to be a simple way to add delays to animations. For reference, here is what I\'m aiming to achie

Answer 1

Since Angular 4.2.6 you can use query(), stagger() and animateChild() to stagger all kinds of animations. Here's an example:

template: `
    

      
{{item}}
    
  `,
animations: [
    trigger('fade', [
      transition(':enter', [style({opacity: 0}), animate('.6s ease')])
    ]),
    trigger('stagger', [
      transition(':enter', [
        query(':enter', stagger('.3s', [animateChild()]))
      ])
    ])
  ]

Plunker: https://embed.plnkr.co/pQQSZETi7mnToB6lqfID/