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

The staggering module is still not ready. But there are some hacky paths to archieve the same effect.

1. If you have a fixed list in size (or at least at screen). You can write a stagger function that returns a delayed animation for every state throught 0 to n. the stagger function should return AnimationEntryMetadata[] Then. you should pass bind the @expandSkill to the variable i on the loop. On the end, you will be creating dynamic, in animations for every object.

2. Another option you have, is use, the Renderer plus a ViewChildren, query the childs, and create the stagger animation with css styles. The renderer provides a setElementStyle.

3. There is a thirth option, a little more hacky.. Render a new list, an populate it throught a setTimeout.

I used the two for some rich animations. Sure there are better aproaches :)