Show loading bar for every http request angular2

Question

I am moving my app from angularjs to angular2. I was using Angular Loading Bar which is

An automatic loading bar using angular interceptors. It works automatically, so simply include it as a dependency and it will automatically display the progress of your $http requests.

More info

I am trying to find similar plugin in angular2. I came across a few like ng2-slim-loading-bar but here I have to manually manage the progress. For every http request, I have to manually start the progress bar and then finish it.

So, are there any existing plugin available which can do exactly what Angular Loading Bar does in angularjs. Or how can I modify any existing plugin to behave like this.

Answer 1

You can use ngx-progressbar. It can automatically show the progress bar while a HTTP request is running.

All you have to do is :

1- Import and provide NgProgressCustomBrowserXhr

import { NgProgressCustomBrowserXhr } from 'ngx-progressbar';

@NgModule({
 providers: [
   // ...
   { provide: BrowserXhr, useClass: NgProgressCustomBrowserXhr } ,
 ],
 imports: [
   // ...
   NgProgressModule
 ]
})

2- Use it like below in your template.

<ng-progress></ng-progress>

The progress will start and complete automatically with your HTTP requests. no need to use NgProgressService to call start()/done() manually.