Animations and Observables don't work well together

Angular
1

Hi, my name is Álvaro, and I’m trying to create a simple TODO List app using Angular.
I added animation and it worked properly.
However, when I tried to “take to the next level” :slight_smile: I ran into some issues.
At first, the TODO list was a simple array and everything was working properly.
But when I moved the list to a Firebase database, the animations were not working anymore.
At first, the stagger stopped working. In this case, all items were appearing at the same time.

Next, for each TODO item I added a property to mark if the task is completed or not.
At any moment I toggle this property by clicking at this item to set the CSS property
text-decoration: line-through,
the item disappears and re-enters on the screen, triggering the animation all over again.

Is there a way to prevent that from happening, and to make stagger work with observables as well?

Thanks in advance.

2

Figured it out already, just in case anybody goes through the same kind of issue.
In fact, animations and firebase don’t work well together.
In general terms, in this situation, it is necessary to subscribe to an observer and keep a local array in order to display the items on screen.
Also, after that, work locally to handle the strikethrough.
After that is done, update the firebase database to keep everything in sync.
So for all animations, don’t keep updating the DOM based on something like:

*ngIf="items$ | async as items"

Subscribe to items$ on the component.ts file, update an items array and work with this array.
This should work better.

1 Like