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

Question

When I click on the ion-item I set 'downloading' to true. How do I get the progress bar to show only for the item that I clicked on and also only update the progress for the one clicked on?

Right now it shows every one of the bars at once and updates the progress for each of them the same.

<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>
</ion-item-sliding>

Answer 1

So basically you need to add downloading field into each item, and

Template

...
<ion-item *ngIf="lessonSegment == 'available'" (click)="download(item)">
...
  <ion-progress-bar *ngIf="item.downloading" color="primary" value="0.5" size="12"></ion-progress-bar>
...

Ts file

...
download(item) {
   ...
   item.downloading = true;
   ...
}
...

Hope that helps.