Custom Loader Interceptor A loader has been implemented within an Interceptor. I have a specific requirement where the loader should not be triggered during the upload() function. It should not be applied to that particular method only.
export class CustomLoaderInterceptor implements HttpInterceptor {
constructor(private customLoaderService: LoaderService) { }
intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.customLoaderService.show();
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
this.customLoaderService.show();
return next.handle(req).pipe(map(event => {
if (event instanceof HttpResponse) {
this.customLoaderService.hide();
}
return event;
}));
}
}
}
custom-loader.service.ts This service includes methods to start and stop the spinner.
export class CustomLoaderService {
isLoading = new Subject<boolean>();
constructor() { }
show() {
this.isLoading.next(true);
}
hide() {
this.isLoading.next(false);
}
}
MyUploadService
In the following method where I invoke upload(), I need to prevent the loader from displaying.
upload(file: File,id) {
const formData: FormData = new FormData();
formData.append('file', file);
return this.http.post(`${this.baseURL}/fileupload/${id}`, formData,{
reportProgress: true,
observe: 'events'
});
}