Ion-Progress-Bar Inside ngFor List Showing For Every Item

<ion-item-sliding *ngFor="let item of items">
    <ion-item *ngIf="lessonSegment == 'available'" (click)="download()">
      <ion-progress-bar *ngIf="downloading" color="primary" value="0.5" size="12"></ion-progress-bar>
      <ion-col size="12">
      <ion-col size="12">
    <div slot="end" class="download-text">Download</div>

When I add a progress bar to this ngFor with a boolean ngIf set to true once download starts, then the progress shows up for every item, not just the one clicked.

How do I have it only show up for the item that has been clicked?


you have to check for something which is reffered to the ITEM in the *ngFor

so pass in the click event the item and set in the component item.downloading = true
next check in the progressbar for it
&lt;ion-progress-bar *ngIf="item.downloading" color="primary" value="0.5" size="12"&gt;&lt;/ion-progress-bar>