How to call backend apis after finishing the first api call in angular 13?

I am working on angular 13. I have 4 api calls in one component but only one api call is enough to render the view. remaining 3 api calls are only for internal coding purpose.
I want to call the rest of 3 api calls after finishing the first api call how to do it?
i have tried life cycle hooks of angular but parallel api calls are going

>Solution :

We say the ApiOne is the important one. Then you can simply do this:

Code

constructor(private myService: MyService) {
  this.loading = true;
}

ngOnInit() {
  this.myService.apiOne().subscribe(data => {
    this.myService.apiTwo().subscribe(data => { console.log("Service Done..."});
    this.myService.apiThree().subscribe(data => { console.log("Service Done..."});
    this.myService.apiFour().subscribe(data => { console.log("Service Done..."});
    this.loading = false;
  })
}

HTML

<div *ngIf="!loading">
  <!-- Your content -->
</div>
<loading-spinner *ngIf="loading"></loading-spinner>

What you can do, too is to use toPromise instead of subscribe for the httpClient.
By the way: toPromise is deprecated, you can use the newer firstValueFrom.

Code

async myLoader() {
  const result = await firstValueFrom(this.myService.apiOne());
  this.loading = false;
  // Do other stuff
}