Angular - action after service call is made

Question

Im working in Angular 14, and Im loading a page with content. Some of the content though, is retrieved from an outbound service call, and I have a loading screen while the content is loading.

I have an *ngIf statement on my loading spinner, and I set that variable to true while I make my call. When the content comes back, I set the variable to false, which should now display the full content.

The behavior Im seeing is that the screen loads, and spinner disappears and then a few seconds later my content pops up.

Im looking into some of these Angular lifecycle hooks, and Im wondering if there's a way to use these to set that variable to false once all my ngOnInit() operations are fully completed.

Thanks in advance.

Answer 1

There isn't an inbuilt way of doing this, mainly because your ngOnInit() could contain an async function and Angular can't guarantee when that function has finished (without forcing the developer into some pattern where they have to return a Promise/Observable from within ngOnInit() etc).

However, you can build an equivalent yourself (not in ngOnInit, but within the functions you are using). This is actually more flexible than being tied to an Angular lifecycle hook as you can set your loading state wherever (and whenever) you want to deploy your functions.

In most applications, you will have some source of data arriving asynchronously, so typically you would use RxJS to combine all of your asynchronous sources and update your loading state when all data sources have either returned successfully or errored.

For example:

synchronous example

export class YourComponent {
  ngOnInit() {
    this.setupPage();
  }

  setupPage(): void {
    this.isLoading = true;
    this.yourSyncFn1();
    this.yourSyncFn2();
    this.yourSyncFn3();
    this.isLoading = false;
  }
}

asynchronous example

export class YourComponent {
  ngOnInit() {
    this.setupPage();
  }

  setupPage(): void {
    this.yourAsyncFns$().subscribe();
    this.yourSyncFn1();
    this.yourSyncFn2();
  }

  yourAsyncFn1$(): Observable<[DataOne[], DataTwo[]]> {
    yourAsyncData1$: Observable<DataOne[]> = this.dataService.getData1$().pipe(catchError(() => []));
    yourAsyncData2$: Observable<DataTwo[]> = this.dataService.getData2$().pipe(catchError(() => []));

    return defer(
      () => {
        this.isLoading = true; // This will be set at the moment this.yourAsyncFn1$() is subscribed to

        return forkJoin([yourAsyncData1$, yourAsyncData2$])
          .pipe(
            finalize(
              () => {
                this.isLoading = false; // This will be set at the moment your forkJoin completes
              }
            )
          );
      }
    )
  }
}