Загрузчик Angular Show при получении данных с httpclient.get

Question

Я хочу знать, как плохо добавить загрузчик, когда данные извлекаются из API.Мне нужен загрузчик до тех пор, пока данные не придут.

this.clientData = this.httpClient.get(url,{responseType: 'json'}).
  subscribe(data => {
   //here the loader come i think
  console.log(data);
  this.data = data.records;
 }

и когда данные загружаются, загрузчик закрывается.По возможности с помощью bootstrap я также использую в приложении загрузчик.

Answer 1

Я не знаю, является ли это лучшим способом сделать это, но я думаю, что это будет работать

async getCall() {
  // Show loader here
  this.showLoader = true;

  this.clientData = await this.httpClient.get(url,{responseType: 'json'}).toPromise();

  // Hide Loader here
  this.showLoader = false;
}

Answer 2

компонент

this.IsLoading = true;
    this.httpClient.get(url,{responseType: 'json'}).subscribe(
      (data: any) => {
        this.data = res.records;
        console.log(res);
      },
      error => { },
      () => (this.IsLoading = false)
    );
  }

HTML-файл

<div class="content" [appSpinner]="IsLoading">
/*show content*/
</div>

и добавьте spinner как directive

ИЛИ, если вы не хотите использовать директиву, вы можете просто использовать

<div class="content" *ngIf="IsLoading">
/***/
</div>