jack miao jack miao - 26 days ago 6
TypeScript Question

How to add loader in my html to wait for data fetching

I have a part of my html that triggers data fetching when a button is being clicked, sometimes it takes time for the data to come back and I want to lock the screen with loader until the data is retrieved, how can I do that?

this is the current code:

<button *ngFor="#ele of myListOfButtons" md-button (click)="bringDataToDisplay(ele.id)">
{{ele.name}}
</button>


So I want a loader when there is a click on
bringDataToDisplay
and until the data is back (its basically an api call to bring the data so its async, using Observables).

thanks!!

Answer
isLoading:boolean = false;

bringDataToDisplay(id) {
  this.isLoading = true;
  this.http.get(...).subscribe(response => {
    ... process response
    this.isLoading = false;
  });
}
<loader *ngIf="isLoading"></loader>
<div *ngIf="!isLoading">
  normal content
</div>
Comments