Using trackBy for re-order animations

Ionic Framework
1

I have the following situation: I have a timetable where there are events which repeat every week. When I view the next/previous week, sometimes new events are present for only that week. Sometimes day changes can also happen - e.g. Tuesday’s events can become Wednesday’s events.

I am attempting to animate the changes between weeks.

All of the timetable event elements are absolutely positioned using their top and left properties, which has made things much easier.

So far I have gotten this to mostly work using trackBy and css transitions on the top and left properties. I am also using Angular animations for void => * and * => void to add/remove any timetable events in a visually appealing manner.

I am running into an issue where trackBy does not work when the length of the array changes. So if I have 12 events this week and move to the following week where there are 11 events, the animations don’t work properly because trackBy didn’t bother keeping track of the event IDs.

Is there any way to force trackBy to always run, even if the length of the array is changed?

Thank you

2

Without lnowing the details there may be a solution in making a copy of the array and reassigning the clone so there is a forced change detection

Just as a first thought

3

Change detection is occurring. The problem is it’s happening “too much”.

From my understanding, trackBy prevents re-creating DOM elements when their ID is still in the array. What appears to be happening is when the size of the array grows it neglects to check the trackBy and just re-renders everything

4

How do u add or remove items?

5

I am creating a new array of objects each time (immutable). The objects are never the same which is why I have to use trackBy.

6

A new array will cause a full rerender ad it will create a new object reference

Can u use slice, push and or pop insteaf to manipulate it?