How to show loading bar in angular 4

Question

I am using angular 4. And trying to add loading bar, till I didn't get the response from the server side. When Request gets complete, it should not hide. For this I am using below code In module.ts:

import { NgProgressModule } from 'ngx-progressbar';
@NgModule({
imports: [
    NgProgressModule
]
)}

And in Html file I am using below:

<ng-progress [positionUsing]="'marginLeft'"
[direction]="'leftToRightIncreased'"
[color]="'#4286f4'" [trickleSpeed]="500" 
[thick]="true" [ease]="'easeInSine'" ></ng-progress>

Sajeetharan · Accepted Answer · 2018-05-19 05:59:56Z

1

In components, wherever you need the progress bar, you have to

import { NgProgress } from 'ngx-progressbar';

and

constructor(private ngProgress: NgProgress) { 
}

use start() and stop() as you need

this.ngProgress.start();

answered May 19, 2018 at 5:59

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

rohit13807 Over a year ago

Thanks, @Sajeetharan, for your intention toward this. It works for me, but instead of stop(), "done()" works for me. i.e: this.ngProgress.done();

Collectives™ on Stack Overflow

How to show loading bar in angular 4

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related