0

I want to display a list of message. But if there is a lot of message, the message are overflowing out of the screen.

So, I wanted to remove the first element to put it and the end of the list. But I wanted to remove it with an animation, and add it with an animation too.

But it's not working as I expected. When I only remove the element, it's working. If I only add an element, it's working too. But if I do both as the same time, there is no animation

See : https://stackblitz.com/edit/angular-animation-question

Does somebody can explain me why ? I suppose that I've missunderstand something as it my first try with Animation.

Gildas Cuisinier
  • 1
  • 2

1 Answers1

1

Managed to do that in next way:

hello.component.html

<div [@listStagger]='items[items.length - 1]'>

hello.component.ts

   var tempMessage = this.messages.shift();
   this.messages.push({ ...tempMessage });

on stackblitz.

Hope that helps.

Amir Arbabian
  • 3,419
  • 1
  • 6
  • 12
  • Now you track changes by last added object, so in real world scenarios you will be adding new object (that have different reference) so it would work as is, but here to imitate new objects i used spreading operator – Amir Arbabian Jan 27 '19 at 09:30
  • Thank you for you help ! So if I well understand, the problem with my [@listStagger]='items.length' is that the size change too "quick", so the angular animation does not handle the change ? And so it is not triggering the animation ? Right ? – Gildas Cuisinier Jan 27 '19 at 09:45
  • @GildasCuisinier I assume yes, because you delete an item and add an item during one async turn, and change detection runs afterwards, so for angular your array have the same length all the time – Amir Arbabian Jan 27 '19 at 10:03