I would like to have animated a long list (multi-paged) of items in Angular. So what I already did is to split the list into chunks. Now I'm trying to animate each item in each chuck.
If the first page is rendered, it should wait for a while and then replace the list with the next chunk and start animating again.
Chunk #1
-- 1 --
-- 2 --
-- 3 --
Chunk #2
-- 4 --
-- 5 --
-- 6 --
...
But for whatever reason, it just renders the first two chunks and it seems that Angular doesn't recognizes that the list has changed.
What is wrong and how can I realize such an animation with Angular animations? I have attached a Stackblitz that shows my current process and the problem.
https://stackblitz.com/edit/angular-ivy-q7aufk
Update
In the template I've changed
[@listAnimation]="items.length"
to
[@listAnimation]="items"
Now it plays the animation, but shows two chunks at once and the :leave animation is not processed. Please check out the changed stackblitz: