Spinner loads for every button when clicked on a specific button

Issue

I have implemented an ion spinner and an icon inside a single button which acts as a download button. When the page loads only the download icon is visible and when a user clicks on it the download icon is hidden and the spinner shows up. I have used ngFor to show multiple download buttons.

I am facing an issue when i click on a specific button, all the spinner starts to load rather than the specific button spinner.

Here is my code

          <ion-list>
            <div class="chip" *ngFor="let attachment of Trade.attachment">
              <div class="chip-content">
                <ion-label style="font-weight: 500;">{{attachment.attachment_file_name}}</ion-label>
              </div>
              <div class="chip-close">
                <button  #downloadButton ion-button clear color="dark"
                  (click)="download(attachment.attachment_file_name,attachment.attachment_id,downloadButton.isLoading = true)">
                  <ion-icon name="arrow-down" md="md-arrow-round-down" *ngIf="!downloadButton.isLoading" color="primary"></ion-icon>
                  <ion-spinner class="downloadspinner" name="crescent" *ngIf="downloadButton.isLoading"> </ion-spinner>
                </button>
              </div>
            </div>
          </ion-list>

I have tried the solution from this link. It works but i am not able to stop the spinner when my function is complete.

How do i load a spinner specific to the button?

Solution

instead downloadButton.isLoading use attachment.isLoading . This will store data in row when button is click

Create one item in attachement as isLoading. Default value will be false. When you click on button make it true and once process is done make it again false.

Change it like below. No need to pass isLoading into function. I have changed it to row instead. With that you can change that particular row value to false.

(click)="download(attachment.attachment_file_name,attachment.attachment_id, attachment);attachment.isLoading = true;"

in your typescript function

download(file, id, attachement_row) {
    //Once your downloading done
    attachement_row.isLoading = false;
}

Answered By - Shabbir Dhangot