In our Angular 9 application, we have various components, some of which have parent-child relationships while others are independent. We begin by making an initial API call that returns a true or false flag value. Depending on this value, we decide whether to proceed with further calls or halt the execution.
homecomponent.html :
<div>
//header is child component
<app-header>
</app-header>
.......
......
</div>
homecomponent.ts:
export class HomeComponent implements OnInit {
ngOnInit(): void {
this.getPageConent();
}
getPageConent() {
// below service will make the http call
this.dataService.GetPovertyPageStaticContent('home').subscribe((result: any) => {
// based upon the flag execute further or stop execution
});
}
}
headercomponent.ts:
export class HeaderComponent implements OnInit {
ngOnInit(): void {
this.getContents();
}
getContents() {
// Another API call to get page data
this.dataService.GetPovertyPageStaticContent('pageheader').subscribe((result: any) => {
//do some operation
});
}
}
We have multiple components interconnected in a similar manner. Our goal is to restrict additional API calls within the application based on the outcome of the initial API call.