Angular - Why is ngFor recycling my dom instead of creating new dom elements?

I'm using angular 15 and Typescript.

I'm trying to understand why ngFor is recycling my dom while I want it to create new elements for each element in the for loop.

<div *ngFor="let entry of fileUploads | keyvalue; trackBy: trackByFilename">
<span id="{{entry.key}}">Filename: {{ entry.key }} {{ entry.value }}</span>
</div>


this is how I set the map:

this.fileUploads.set(fileName, progress);


However, I also tried:

const updatedMap = new Map(this.fileUploads);
this.fileUploads.set(fileName, progress);
this.fileUploads = updatedMap;


What is happening in the frontend: The same div is recycled for each entry in the map. While I expect each element in the map to have its own div. Does anyone know why this could be happening?

Continue reading...