Introduction

In this article we are going to learn how to create a progress bar using ngx-bootstrap in Angular 8.
Ngx-Bootstrap has released a package of open-source tools which is native Angular directives for Bootstrap 3 and 4. It contains all core components powered by Angular. In this article we will learn about Typehead component which is a cool feature of Ngx-bootstrap.

What is Progress Bar?

A Progress bar is a component in GUI which is used to visualize the progression of a task which is completed, such as the percentage of amount that is completed during downloading.
In Ngx-bootstrap progressbar there are normal, striped and striped with animated striped progress bar.
Prerequisites
  • Basic knowledge of Angular
  • Visual Studio Code must be installed
  • Angular CLI must be installed
  • Node JS must be installed
Step 1
Let's create a new Angular project using the following NPM command,
  1. ng new progressBar
Step 2
Now, let's create a new component by using the following command,
ng g c ngx-bootstrap-progressbar
Step 3
Install ngx-bootstrap from npm by using the folowing command.
  1. npm install ngx-bootstrap --save
Or,
  1. ng add ngx-bootstrap --component progressbar
Step 4
Now let's add bootstrap styles in our index.html file .
For Bootstrap 3,
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
For Bootstrap 4,
  1. <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">
Step 5
Let add the template in our ngx-bootstrap-progressbar.component.html.
  1. <div class="row">
  2. <h2 style="margin: auto;">Example of Ngx-Bootstrap Progress Bar</h2>
  3. <div class="col-sm-8" style="margin: 10px;">
  4. <div style="margin: 10px;">
  5. <button (click)="showProgressBar(1)" class="btn btn-primary">Show Normal Progress Bar</button>
  6. </div>
  7. <div *ngIf="normalPB" class="mb-2">
  8. <progressbar [value]="55"></progressbar>
  9. </div>
  10. </div>
  11. <div class="col-sm-8" style="margin: 10px;">
  12. <div style="margin: 10px;">
  13. <button (click)="showProgressBar(2)" class="btn btn-primary">Show Striped Progress Bar</button>
  14. </div>
  15. <div *ngIf="stripedPB" class="mb-2">
  16. <progressbar [value]="35" type="danger" [striped]="true">35%</progressbar>
  17. </div>
  18. </div>
  19. <div class="col-sm-8" style="margin: 10px;">
  20. <div style="margin: 10px;">
  21. <button (click)="showProgressBar(3)" class="btn btn-primary">Show Animated Progress Bar</button>
  22. </div>
  23. <div *ngIf="animatedPB" class="mb-2">
  24. <progressbar max="200" [value]="180" type="success" [striped]="true" [animate]="true"><i>180 / 200</i></progressbar>
  25. </div>
  26. </div>
  27. </div>
Step 6
Now, open the ngx-bootstrap-progressbar.component.ts file and add the following code in this file.
  1. import { Component } from '@angular/core';
  3. @Component({
  4. selector: 'app-progress-bar',
  5. templateUrl: './progress-bar.component.html'
  7. })
  8. export class AngularProgressBarComponent {
  9. normalPB: boolean;
  10. stripedPB: boolean;
  11. animatedPB: boolean;
  13. showProgressBar(value){
  14. // Value =1 Normal Progress bar
  15. // Value =2 Striped Progress bar
  16. // Value =3 Animated Progress bar
  17. this.normalPB=false;
  18. this.stripedPB=false;
  19. this.animatedPB=false;
  21. value ==1 ? this.normalPB=true : value ==2 ? this.stripedPB=true : this.animatedPB=true;
  23. }
  24. }
Step 7
Now, open the app.component.html file and add the following code in the file,
  1. <app-ngx-bootstrap-progressbar></app-ngx-bootstrap-progressbar>
Step 8
Let's open app.module.ts file and add the following code in the file,
  1. import { BrowserModule } from '@angular/platform-browser';
  2. import { NgModule } from '@angular/core';
  3. import { FormsModule} from '@angular/forms';
  4. import { AppComponent } from './app.component';
  5. import {ProgressbarModule} from 'ngx-bootstrap/progressbar';
  6. import {ProgressBarComponent } from './progress-bar/progress-bar.component';
  8. @NgModule({
  9. declarations: [
  10. AppComponent,
  11. ProgressBarComponent
  12. ],
  13. imports: [
  14. BrowserModule,
  15. FormsModule,
  16. ProgressbarModule
  17. ],
  18. bootstrap: [AppComponent]
  19. })
  20. export class AppModule { }
Now it's time for the output,
This is the normal progress bar which we can use with different bootstrap supported contextual classes : success, info, warning, danger
This is the striped progress bar which has striped lines to show the amount of tasks done.
This is the animated progress which looks like it is in progress .
Though we can use these progress bars dynamically we just want to replace the value field with our dynamic variable.

Conclusion

In this article, we have seen the Ngx-Bootstrap progressbar Component in an Angular 8 application.
I hope you have enjoyed this article, as I have enjoyed writing and coding the examples.
Please let me know how to improve it.