How to create loading component in Angular 11

user_15774345 0
Viewed 125

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?

angular11 angular loading
1 Answers

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

user_92749560
Related