I need to create a loading component with Angular 11. When loading data, for example, I want my loading-component to be displayed otherwise other components should work.
I don't have a proper idea to do this?
Can anyone help me?
Add a comment
|
1 Answer
you can create fullscreen loading overlay in app component and to show and hide that component use service and observable
app component: html:
<div *ngIf="loadingService.isLoading$ | async">Loading...</div>
ts:
constructor(public loadingService: LoadingService) {
}
loading service:
class LoadingService {
private isLoading = new Subject<boolean>();
isLoading$ = this.isLoading as Observable;
toggleLoading(val: boolean) {
this.isLoading.next(val);
}
}
to start loading from any component inject service and call toggle loading method:
constructor(private loadingService: LoadingService) {
this.loadingService.toggleLoading(true);
}
there can be some syntax errors or typos in this code as i have not tested it, just sharing the idea let me know if you face any other problem
