Angular simple progress bar using bootstrap.

Here I am going to explain how to build a progress bar using angular 1 and 2. I will be explaining this by using bootstrap 2 and 3 as well.

Angular 1 progress bar using bootstrap 3

---

Let us check how we can do this by using Angular 1 and Bootstrap3.

HTML

<div class="progress">
 <div class="progress-bar" ng-style="{ 'width': currentPercentage + '%' }">
   <span class="sr-only">{{currentPercentage}}% Complete</span>
 </div>
</div>

Controller

$scope.currentPercentage = '60';

If you want to show the text as well simply remove class 'sr-only'. For example

<div class="progress">
    <div class="progress-bar" ng-style="{ 'width': currentPercentage + '%' }">
        <span>{{currentPercentage}}% Complete</span>
    </div>
</div>

You can show continuous progress depends on your status. Check below example for that.

if(status == 'started')
{
  $scope.currentPercentage = '33.33';
}else if(status === 'inprogress')
{
  $scope.currentPercentage = '66.66';
}else
{
  $scope.currentPercentage = '100';
}

Angular 1 progress bar using bootstrap 2

---

<div class="span12">
  <div class="progress active">
     <div class="bar"  ng-style="{ 'width': currentPercentage + '%' }"></div>
   </div>
</div>

Other codes remain same.

Angular 2 progress bar using bootstrap 3

---

Let us check how we can achieve this by using angular 2 concept.

Html

<div class="progress">
<div class="progress-bar" [ngStyle]="{ 'width': currentPercentage + '%' }">
 <span>{{currentPercentage}}% Complete</span>
</div>
</div>

Component

export class App {
  currentPercentage:String;
  constructor() {
    this.currentPercentage = '60';
  }
}

You can handle the progress info as well similar like we did in angular 1.

export class App {
  currentPercentage:String;
  constructor() {
    this.currentPercentage = '60';
  }
  sampleMethode(status)
  {
    if(status == 'started')
    {
      this.currentPercentage = '33.33';
    }else if(status === 'inprogress')
    {
     this.currentPercentage = '66.66';
    }else
    {
     this.currentPercentage = '100';
    }
  }
}

Here the main difference is the way adding style. In angular 1 it is 'ng-style' and in angular 2 it is [ngStyle]

Angular 2 progress bar using bootstrap 2

---

Similar like in angular 1, here also required only html changes.

<div class="span12">
  <div class="progress active">
     <div class="bar"  [ngStyle]="{ 'width': currentPercentage + '%' }"></div>
   </div>
</div>

Related Post

1. Get selected values on click and show in the UI - Angular js 2

2. Simple search using pipe in angular 2

3. Date filtering and formatting using pipe in Angular 2

4. Add class to an active element - angular 2