How to show a loading spinner while waiting on an observable getting data from a service in Angular

Question

I have set up an observable service that helps me persist data, but I need a way to show a loading spinner while the data is waiting to come from the observable.

My

Answer 1

change the below line

async getData() {
    this.organisations$ = this.organisationsService.getList();
  }

to

async getData() {
   this.organisations$ = this.organisationsService.getList();
   this.organisations$.subscribe((data) => 
     this.loading = false;
   );
  }

this should work because this is the observable you are waiting for completion, not the getData method