How to disable loading indicator in angular httpClient subscribe callback?

Question

I use loading indicator while data is loading and disable it after success. But if there is error - I need to disable it in error case. In this case, duplication occurs. Is there any way to turn it off once at the end?

loading: boolean = true;

this.myService.getInfo(formData).subscribe(response => {
    ...success action
    this.loading = false;
}, error => {
    ...error action
    this.loading = false;
});

Thank you!

`httpinterceptor` when work when you are calling Http request and response with api — Kiran Mistry, Apr 13 '20 at 12:40
have you check [this](https://www.npmjs.com/package/ngx-spinner) and [example](https://napster2210.github.io/ngx-spinner/) — Kiran Mistry, Apr 13 '20 at 12:41

mr. pc_coder · Accepted Answer · 2020-04-13T12:58:58.843

1

U can use finalize method. Example link is below

this.myService.getInfo(formData)
   .pipe( 
         finalize(() => {
              // Your code Here
         })
     )
.subscribe(response => {
    ...success action
    this.loading = false;
}, error => {
    ...error action
    this.loading = false;
});

https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/finally.md

also check it here

Angular : how to call finally() with RXJS 6

edited Apr 13 '20 at 12:58

answered Apr 13 '20 at 12:44

mr. pc_coder

16,412
3
32
54

Then I think u want finally method. https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/finally.md – mr. pc_coder Apr 13 '20 at 12:48
U can use it with pipe . I edited answer . U can check it – mr. pc_coder Apr 13 '20 at 12:59

score 0 · Answer 2 · answered Apr 13 '20 at 12:36

you can implement a interceptor and service for displaying the loader. and this service .

here is a sample for showing loader using inerceptor.

import { Injectable, Injector } from '@angular/core';
import { HttpEvent, HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http';
import { Observable, pipe } from 'rxjs';
import { tap } from 'rxjs/operators';
@Injectable({
  providedIn: 'root'
})
export class LoaderInterceptorService implements HttpInterceptor {
  constructor(private loaderService: LoaderService) { }
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    this.showLoader();
    return next.handle(req).pipe(tap((event: HttpEvent<any>) => { 
      if (event instanceof HttpResponse) {
        this.onEnd();
      }
    },
      (err: any) => {
        this.onEnd();
    }));
  }
  private onEnd(): void {
    this.hideLoader();
  }
  private showLoader(): void {
    this.loaderService.show();
  }
  private hideLoader(): void {
    this.loaderService.hide();
  }
}

loader service

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class LoaderService {
  private loaderSubject = new Subject<LoaderState>();
  loaderState = this.loaderSubject.asObservable();
  constructor() { }
  show() {
    this.loaderSubject.next({ show: true });
  }
  hide() {
    this.loaderSubject.next({ show: false });
  }
}

once you added this interceptor , you dont need to set the showloader true and false each time an api call is invoked.

I thought it was possible to do without interceptors, but apparently not. Thank you for help! — , Apr 13 '20 at 12:39
@hersir1, you can do it without interceptors. An aproach with "operators": https://stackoverflow.com/questions/60207721/how-to-show-a-loading-spinner-while-waiting-on-an-observable-getting-data-from-a/60222078#60222078 — Eliseo, Apr 13 '20 at 14:32

How to disable loading indicator in angular httpClient subscribe callback?

2 Answers2