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?
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;
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments