How to show loading spinner in angular 8?

Question

Angular

How to show a spinner or some kind of loader in angular 8 so that the user understands that the request takes time and you have to wait?

Answer 1

Most often, this is done by a service of the AppLockService type that sends messages of the APP_LOCK / UNLOCK type, which in turn catches a component of the AppLockComponent type and, based on the data from the message, hides or shows an overlay with a twist; it is enough to call, for example, the _appLockService.lock_ method and the twist will appear. It can be convenient to execute this method as an asynchronous function, then you can automatically send messages - before the lock and after exiting the asynchronous procedure, very convenient. There are tons of naturally ready-made solutions on the Internet

Answer 2

I usually do this:
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>