Angular15 - Wait until I receive data from API call on ngOnInit then call ngAfterViewInit

Question

I am making a below api call on ngOnInit I want to force it to wait untill data returned to Dto before calling to ngAfterViewInit event as I am doing operation on that data there. As such its not waiting and moving to ngAfterViewInit where my Dto is undefined and then coming back to ngOnInit subscribe to load which I dont want. Any help appreciated.

this.subscriptions.add(
  this.gridService
    .GetGridByName(
      this.gridName,          
      '1.0'
    )
    .subscribe({
      next: (data: any) => {
        if (data.result) {
          // should wait for this dto to load before hitting to ngAfterViewInit 
          this.gridDto = data.result;              
        }
      },

score 0 · Accepted Answer · answered May 07 '23 at 01:22

You already have an observable. Just stay in the world of observables until there's a side effect you want.

gridDto$: Onservable<any>;

ngOnInit() {
  ...
  this.gridDto$ = this.gridService.GetGridByName(
    this.gridName,          
    '1.0'
  )
  .pipe(
    map(data => data?.result),
    // if nothing returned, don't emit anything.
    filter(result => !!result),
    // don't repeat instructions per listener
    shareReplay(1)
  );
}

If your grid component accepts observables, give it gridDto$ instead. Otherwise, change gridDto in your template to gridDto | async so that Angular knows it's an observable.

Now that you get the data as an observable you can pipe or subscribe to it in your ngAfterViewInit script.

Angular15 - Wait until I receive data from API call on ngOnInit then call ngAfterViewInit

1 Answers1