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

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

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?

#3

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
(click)="download(item)"&gt;
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>