jack miao jack miao - 5 months ago 21
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)">

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


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