CODEWITHSUNDEEP
angularangular-material
Sahana
Sahana

Reputation: 11

Angular material progress bar loader

I'm adding a progress bar to my project but it's not working properly.

here is my loader.service code.

  public isLoading : BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false)

here is my interceptor.services code

export class InterceptorService implements HttpInterceptor{

  constructor( public loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loaderService.isLoading.next(true);
    return next.handle(req).pipe(
      finalize(
        () => {
          this.loaderService.isLoading.next(false);
        }
      )
    );
  }
}

html page

    <div class="loader-container">
    <mat-progress-bar mode="indeterminate" *ngIf="loaderService.isLoading | async" ></mat-progress-bar>
  </div>

any one please check what's the issue with this code.

Upvotes: 0

Views: 952

Answers (1)

Khumo Mogorosi
Khumo Mogorosi

Reputation: 411

You have to add your interceptor to providers in your app.module.ts

import { HTTP_INTERCEPTORS } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { InterceptorService } from './interceptors';


@NgModule({
  declarations: [
    ...
  ],
  imports: [
    ...
  ],
  providers: [
    {
      provide: HTTP_INTERCEPTORS,
      useClass: InterceptorService,
      multi: true,
    },
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

Here's your service.interptor.ts

export class InterceptorService implements HttpInterceptor{

  constructor( public loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.loaderService.isLoading.next(true);
    return next.handle(req).pipe(
      finalize(
        () => {
          this.loaderService.isLoading.next(false);
        }
      )
    );
  }
}

Here's your template file

<div class="loader-container">
    <mat-progress-bar mode="indeterminate" *ngIf="loaderService.isLoading | async" ></mat-progress-bar>
  </div>

Lastly, here's your component.ts

export class AppComponent {
  constructor(public loaderService: LoaderService) {}

}

Upvotes: 1

Related Questions