How to laod this with every Rest call

[rrohitesh]

Hello,

Can you please provide information on how to load this loading bar with rest call so that when i load any component it should ?

[NGorco]

You should create custom Http service (actually, a wrapper around basic Http) and use it everywhere. On each put/get/post etc fire progress bar loading.

[angelayanpan]

In the most recent release of Angular 4.3, there is a functionality called HTTP interceptor. And you can use it for HTTP call progress tracking. Here is a link to the official doc: https://angular.io/guide/http#intercepting-all-requests-or-responses

[stuartaccent]

This may or may not be perfect but if It helps anyone based on angular 4.3, a recent example of this I had to do myself was:

@Injectable()
export class LoadingBarInterceptor implements HttpInterceptor {

    private _pending = new Subject();
    private _pendingRequests: number = 0;

    public constructor(private loadingBarService: SlimLoadingBarService) {
        this._pending.subscribe((progress: any) => {
            if (progress.started) {
                this.loadingBarService.start();
            }
            if (progress.completed) {
                this.loadingBarService.complete();
            }
        });
    }

    public intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
        this._requestStarted();
        return next.handle(req).finally(
            () => this._requestEnded()
        );
    }

    private _requestStarted() {
        this._pending.next({
            started: this._pendingRequests === 0,
            pendingRequests: ++this._pendingRequests,
        });
    }

    private _requestEnded() {
        this._pending.next({
            completed: this._pendingRequests === 1,
            pendingRequests: --this._pendingRequests,
        });
    }

}

Then in your app.module.ts:

@NgModule({
    ...
    providers: [
        { provide: HTTP_INTERCEPTORS, useClass: LoadingBarInterceptor, multi: true }
    ]
    ...
})

Stu