Nz Tags Not working properly with ngFor trackBy with nzOnClose

[vatsalpande]

Reproduction link

https://stackblitz.com/edit/angular-znfrjs

Steps to reproduce

There is a list of checkboxes and selected values are shown in tags

1. Select values from checkbox. It will appear as tag.
2. Close tag. It removes extra tags
3. Disable trackBy from app.component.html and it will work as expected

What is expected?

It should work seamlessly with trackBy operator. Without using trackBy, there is a lot of flickering on the screen which doesn't give good UX.
Resultset is also shown on top of tags for debugging

What is actually happening?

when trackBy is enabled, on closing tag, it is not rendering list of tags properly and is removing tags that should be shown

Environment	Info
ng-zorro-antd	8.1.2
Browser	Chrome

[vatsalpande]

Hi,
Did you get a chance to take a look at this issue? Appreciate your help on this.

[hsuanxyz]

@vatsalpande

The Angular animation has a bug angular/angular#24041, it caused the animation can not execute.

This is a temporary solution:

<nz-tag *ngFor="let combination of selectedCombination;" 
        class="tag"
        nzMode="closeable"
        nzNoAnimation
        (nzOnClose)="selectFilter(combination)">
  {{combination.label}}
</nz-tag>

Use the nzNoAnimation directive to prevent flickering.

[vatsalpande]

@hsuanxyz - The proposed temp solution works. Thank you. If possible, please update this ticket once we have a permanent fix so I can apply that,