Let’s add a progress bar to Angular 4 apps using ngx-progressbar

Robert Leckenby
Jul 25, 2017 · 3 min read

Today we’re going to add a progress bar to our Angular 4 app using the great ngx-progressbar package from @MurhafSousli, and straight up: kudos to him for his work !

Sponsored by letsboot.com

What we’ll do:

  1. generate a simple Angular 4 app
  2. install the ngx-progressbar package in our app
  3. import the NgProgressModule to our app
  4. add our custom tag to the app template
  5. simulate a slow http and get some sample json data
  6. explore the service options that ngx-progressbar provides
  7. explore the template options that ngx-progressbar provides
  8. use the Automagic loading bar

Generate a simple Angular 4 app

You need to have angular-cli in order to follow these exact steps, but you can follow the code without it if you don’t use the ng commands.

ng new progressbar-app —-prefix pba

Install the ngx-progressbar package in our app

Once our app is created, we open our project folder in Visual Studio Code (or your favorite editor), we then run the npm installation command and finally open the app in our local browser to check it’s running correctly:

cd progressbar-app
npm install ngx-progressbar --save
ng serve -o

Import the NgProgressModule to our app

In app.module.ts file, we need to import the NgProgressModule (line 4) and add it to the imports of NgModule() (line 15), we also import the HttpModule and add to NgModule():

Add our custom tag to the app template

We now add the ng-progress tag to our template:

<ng-progress></ng-progress>

Adding the tag like this will give us the default options, for a complete list of options you can visit the original page. Here we only show a few options for illustration purposes while we keep the default for the others:

Simulate a slow http and get some sample json data

In order to fake a slow connection and a get request to a json server, we create a const variable in the ngOnInit() that accesses;
slowwly.robertomurray for the fake slow connection and;
jsonplaceholder for the json data:

const sampleUrl = ‘http://slowwly.robertomurray.co.uk/delay/3000/url/https://jsonplaceholder.typicode.com/posts/1';

Explore the service options that ngx-progressbar provides

The service options that NgProgressService provides are:

.start()

to display the progress bar

.set(n)

to set a percentage completion as a fraction

.inc(n)

to increment the progress by a fraction

.done()

to complete the progress

Here we simply use some setTimeout() functions to illustrate the versatility of this package (this setTimeout() would of course never be used in production):

Explore the template options that ngx-progressbar provides

The full list of template options provided by ngx-progressbar covers everything from colour and progress direction to speed and position.

Use the Automagic loading bar

This package also provides a great automagic loading bar which you don’t even need to start or stop; just import NgProgressBrowserXhr and BrowserXhr to your app.module.ts, then add them to your NgModule providers and that’s it !

Et voilà ! Happy coding and follow me on twitter, medium, and LinkedIn for more, also check out letsboot.com for more great content!

I also want to say that I hope this article brings more visibility to the @MurhafSousli for his awesome ngx-progressbar work. Kudos to @MurhafSousli for his great work!

What’s Next? We’ll be looking at other awesome components and bringing you short tutorials to get them running in no time !

Robert Leckenby

Written by

A geologist turned software developer, always a learner, always a teacher

letsboot

letsboot

Full Stack JavaScript development. And TypeScript and other stuff you need… A lot of Angular and Node.js…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade