Progressbar in Angular

In my last article we discuss on how to use Bootstrap Carousel in angular webpages. In these tutorial i discuss on how to use Progressbar in Angular.

First we need to add below line in our app.module.ts file for import module.


.................
//we need to import first Carousel Module From Bootstrap.
import { ProgressbarModule } from 'ngx-bootstrap';
...................
@NgModule({
  .........
  imports: [
                ProgressbarModule.forRoot(),
            ...
           ]
})
export class AppModule(){}



After adding ProgressbarModule in the app module file. Now we can use these in any component.
Let’s start with basic Progressbar code in Component.


<progressbar [value]="60" ></progressbar>

<progressbar [value]="60" type="warning" [striped]="true" ></progressbar>

<progressbar [value]="60" type="warning" [striped]="true" [animate]="true" ></progressbar>


import { Component } from '@angular/core';
 
@Component({
  selector: 'progress',
  templateUrl: './progress.html'
})
export class ProgressbarComponent {}


Using above code you can easily implement Progressbar in your Form steps . Their are mainly 5 parameters
1) Value: value of the progressbar
2) Type: Which color of progress you want to display like default,warning,danger
3) Striped: Default value is false. If you true then striped in progress-bar.
4) Animate: Default value is false. If you True changing value of progress bar will be animated
5) Max: Maximum value of the Progress-bar.


Let’s create Progress bar with Tab’s. Below is the full code of the Progress-bar with tabs



<progressbar [value]="dmvalue " type="warning" [striped]="true" [animate]="true"></progressbar>


<tabset #staticTabs>
    <tab heading="Static title">
      Static content

       <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(1)">Next</button>
    </tab>
    <tab heading="Static Title 1">
      
       Static content 1
       <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(0)">Back</button>
       <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(2)">Next</button>
      </tab>
    <tab heading="Static Title 2">
      Static content 2
      <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(1)">Back</button>
       <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(3)">Next</button>  
    </tab>
    <tab heading="Static Title 3">
      Static content 3
       <button type="button" class="btn btn-primary btn-sm" (click)="selectTab(2)">Back</button>
       <button type="button" class="btn btn-primary btn-sm" (click)="allstep()">Finish</button>
    </tab>
  </tabset>


import { Component,ViewChild } from '@angular/core';
import { TabsetComponent } from 'ngx-bootstrap';
 
@Component({
  selector: 'progress',
  templateUrl: './progress.html'
})
export class ProgressbarComponent {
 @ViewChild('staticTabs') staticTabs: TabsetComponent;
 dmvalue = 0;

 selectTab(tab_id: number) {
    this.staticTabs.tabs[tab_id].active = true;


     if(tab_id ==0){
        this.dmvalue =0;

    }

    if(tab_id ==1){
        this.dmvalue =20;

    }

    if(tab_id ==2){
        this.dmvalue =50;

    }

    if(tab_id ==3){
        this.dmvalue =80;

    }


  }

  allstep(){

    this.dmvalue =100;

  }
}


Display output above code in below video.

Spread the love
  • 27
  •  
  •  
  •  
  •  
  •  
  •  
  •