Как в angular 8 показать spinner загрузки?

Question

[vrazbros]

Как в angular 8 показать spinner или какой нибудь loader чтобы пользователь понимал что реквест занимает время и надо подождать ?

Comments

[Антон Швец]

есть данные - показываем данные. нет данных - показываем спиннер.

Answer 1

[Kovalsky]

Чаще всего для этого делают сервис типа AppLockService который посылает сообщения типа APP_LOCK/UNLOCK, которые в свою очередь ловит компонент типа AppLockComponent и на основе данных из сообщения скрывает или показывает оверлей с крутилочкой; достаточно вызвать например метод _appLockService.lock_ и крутилка появится. Бывает удобно выполнить этот метод в виде асинхронной функции, тогда можно автоматически отправлять сообщения - перед локом и после выхода из асинхронной процедуры, очень удобно. Естественно готовых решений в интернетах тонны

Answer 2

[Qairat]

обычно делаю так:
component.ts

loading: boolean = false;
 data = [];
 ngOnInit() {
  this.loading = true;
  this.service.getAll().subscribe(res => {
   this.data = res;
   this.loading = false;
  });
 }

component.html

<ng-container *ngIf="loading">
  <div class="loader"> </div>
</ng-container>
<ng-container *ngIf="!loading">
  //показываем данные
</ng-container>