I am having the following setup (the below is simplified pseudocode):
<table>
<tr *ngFor="let upload in uploads">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(upload.id)>x</button>
</td>
</tr>
</table>
now, upload will change frequently while progress is being updated. This causes a re-render of the entire row including the button, which makes it very hard to actually trigger the buttons click event. If I click multiple times I'd eventually make it, but I don't think this would make for a good ux...
I think I am must be missing something simple, because I would believe I am not the only person with a similar use case, but I was not able to find any solution - except for moving the button out of the table and having a separate loop through only the array of upload-ids to build the buttons.
I'd highly appreciate if someone could send me on the right track again!
In the end adding the trackBy-function - or in my case trackByRow because I am working with a primeng-table did the trick. I don't fully understand why, because I though trackBy is there to ensure that no other rows are being updated, by my problem was that the actually affected row re-rendered.
But with the trackBy-function in place, when I inspect the dom I see that only the progress-parameter passed to my app-progress-bar component changes, nothing else. And my cancel button works :)
<table>
<tr *ngFor="let upload of uploads; ; let id = index">
<td>
<app-progress-bar [progress]="upload.progress"></app-progress-bar>
</td>
<td>
<button (click)="cancelUpload(id)>x</button>
</td>
</tr>
</table>
If your upload.id is the same as the index , you can use the index to get the id.