I'm currently learning Angular and have a small question about it.
In my App component, I have a Material Progress bar like this:
<mat-progress-bar mode="indeterminate" *ngIf="IsLoading"></mat-progress-bar>
<router-outlet></router-outlet>
and here is how my App Component looks:
export class AppComponent {
IsLoading: boolean=true;
title = 'CBEAAPPMAIN';
}
Now, I have over 100 child components where I need to display the progress bar when making API calls or during long processes.
export class BranchListComponent implements OnInit {
dataSource = new MatTableDataSource<Branch>(this.Items)
ngOnInit(): void {
this.GetItems();
}
GetItems() {
//I need help with setting
AppComponent.IsLoading=true;
this.branchService.getBranch().subscribe({
next: (res) => {
this.response = res;
if (this.response.isSuccess == true) {
this.dataSource = new MatTableDataSource(this.response.value as Branch[]);
//I also need help with setting
AppComponent.IsLoading=false;
}
else {
alert(this.response.error);
}
},
error: (res) => {
alert("Error while Adding")
}
})
}
What would be the most efficient and clean way to set the isLoading flag from any child component without injecting appComponent to every child component as ViewChild?