Angular: Animations for an immutable model inside ngFor - css

Question

I've been unable to get CSS transitions working when using an array of immutable model objects.
Does angular require an in-place update to the property for these to work, or am I doing something wrong?
As an example: (https://plnkr.co/edit/PBSPtk9vMig7cxnHoJqA)
export class Box {
constructor(public selected:boolean){
}
}
function toggle(box:Box):Box{
return new Box(!box.selected)
}
#Component({
selector: 'my-app',
template: `
<ul>
<li *ngFor="let box of boxes">
<div
style="display:inline-block; width: 20px; height:20px; transition: 1s; margin:5px; cursor:pointer;"
[ngStyle]="{'background': box.selected?'green':'red'}"
> </div>
<button (click)="toggle_in_place(box)">toggle (in-place)</button>
<button (click)="toggle_replace_box(box)">toggle (replace box)</button>
<button (click)="toggle_replace_array(box)">toggle (replace array)</button>
</li>
</ul>
`,
})
export class App {
boxes: Box[];
constructor() {
this.boxes = [new Box(true), new Box(false), new Box(true)];
}
toggle_in_place(box:Box){
box.selected=!box.selected;
}
toggle_replace_box(box:Box){
const index = this.boxes.indexOf(box);
this.boxes[index]=toggle(box);
}
toggle_replace_array(box:Box){
this.boxes = this.boxes.map(v=>v===box?toggle(v):v);
}
}
Here I'm trying to animate the color of the div through
[ngStyle]="{'background': box.selected?'green':'red'}"
box.selected can be updated by:
changing the property in-place (toggle_in_place),
replacing the 'box' model (toggle_replace_box)
replacing the entire array (toggle_replace_array).
but toggle_in_place is the only one that results in a visible transition.
Is this just something I have to live with?

Answer 1

What's happening here: When the array changes the ngFor compares the object references in the new array to the old and re-renders any elements that have changed, which breaks the css transitions.
To solve this, ngFor can be given a tracking function which will then be used instead of the reference comparison.
To fix, specify a tracking function to use an id rather than object reference:
trackingFunction(index:number, box:Box){
return box.id;
}
Have ngFor use it:
<li *ngFor="let box of boxes;trackBy:trackingFunction">
Example:
https://plnkr.co/edit/4OXemdSf1Hsm1NU6ZhzT

Answer 2

I think it is something you have to live with. In the latter two cases, since you're creating a new instance of the box each time, it has nothing to transition from.
You could probably make a component which is basically a wrapper around a box and can pass a "transition" boolean to its constructor. Workarounds are pretty dependent on the use case though.