Using “ng-bootstrap” Components in Angular 5 App

In this article, we are going to cover few bootstrap components provided by “ng-bootstrap” module in Angular 5 apps.

• “ng-bootstrap” Checkbox based Buttons (using ngbButton)
• “ng-bootstrap” Alerts (using ngb-alert)
• “ng-bootstrap” Progress Bar (using ngb-progressbar)

In order to implement these components, we will have to configure NgbModule in app module then we will be able to use all ng-bootstrap components in our Angular app.

Using “ng-bootstrap” Checkbox based Buttons

In order to implement checkbox based buttons, we will have to use “ngbButtonLabel” and “ngbButton” provided by ng-bootstrap module like below.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})

export class AppComponent {
title = 'NgBootstrap Directives & Components Demo';
classes = {
classRoom1: true,
classRoom2: false,
classRoom3: false,
};
}

app.component.html

<div style="text-align:center">
<h2> {{ title }} </h2>
</div>
<div style="margin-top:50px;">
<h5>1. ng-bootstrap CheckBox Button Demo</h5>
<p>Select the Class-Room you want to know about the number of students.</p>
<div class="btn-group" data-toggle="buttons"> <label class="btn btn-primary checkButton" ngbButtonLabel>

<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom1">Class 1
</label> <label class="btn btn-primary checkButton" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom2">Class 2
</label> <label class="btn btn-primary checkButton" ngbButtonLabel>
<input type="checkbox" ngbButton [(ngModel)]="classes.classRoom3">
Class 3
</label>
</div>
<p *ngIf="classes.classRoom1">Class Room 1 has 60 students.</p>
<p *ngIf="classes.classRoom2">Class Room 1 has 80 students.</p>
<p *ngIf="classes.classRoom3">Class Room 1 has 40 students.</p>
<hr> </div>

Output:

Using “ng-bootstrap” Alerts

In order to implement bootstrap alerts, we will have to use “ngb-alert” provided by ng-bootstrap module like below.

app.component.html

<h5>2. ng-bootstrap Alerts Demo</h5>
<p>
<ngb-alert [dismissible]="false"> This is ng-bootstrap alert in Angular 5 app. </ngb-alert>
</p>
<p *ngIf="isAlertDisplayed">
<ngb-alert [dismissible]="true" (close)="isAlertDisplayed=false;" type="success">This is ng-bootstrap closable alert in Angular 5 app.</ngb-alert>
</p>
<hr>

 

ngb-alert – It’s a directive which is used to display a bootstrap alert in our Angular app.

dismissible – It’s a property which is used to display close (cross) button on the right corner of the alert. If set true, close button will be displayed otherwise not.

close – It’s an event which will be fired when close (cross) button will be clicked which is on the right corner of the alert.

type – It’s a property that defines which type of alert will be displayed based on its value like default bootstrap values for alerts like success, warning etc.

app.component.ts

export class AppComponent {
title = 'NgBootstrap Directives & Components Demo';
isAlertDisplayed = true;
}

 

Output:

Using “ng-bootstrap” Progress Bar

In order to implement bootstrap progress bars, we will have to use “ngb-progressbar” provided by ng-bootstrap module, like below –

app.component.html

<h5>3. ng-bootstrap Progress Bar Demo</h5>
<p style="margin:20px;">
<ngb-progressbar type="info" [value]="25">25</ngb-progressbar>
</p>
<p style="margin:20px;">
<ngb-progressbar type="warning" [value]="counter" [striped]="true" [animated]="true">{{counter}}</ngb-progressbar>
</p>
<hr>

ngb-progressbar – It’s a directive which is used to display a bootstrap progress bar in our Angular app.

type – It’s a property that defines which type of progress bar will be displayed based on its value like default bootstrap values for progress bars like info, warning etc.

value – It’s a property which used to set the progress bar value.

striped – It’s a property which is used to show a progress bar with striped as shown second progress bar in below output window.

animated – It’s a property which is used to show an animated progress bar.

app.component.ts

import {
Component,
OnInit
} from '@angular/core';
import {
setInterval,
clearInterval
} from 'timers';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
counter = 0;
progressInterval;
ngOnInit() {
this.progressInterval = setInterval(() => {
this.counter = this.counter + 10;
if (this.counter >= 100) {
clearInterval(this.progressInterval);
}
}, 200);
}
}

Output:

In this article, we have covered three ng-bootstrap directives and taught how to use them in Angular 5 apps. We will cover few other ng-bootstrap directives in our next article.

For more Information and to build website using Angular, Hire Angular Developer from us as we give you high quality product by utilizing all the latest tools and advanced technology. E-mail us any clock at – hello@hkinfosoft.com or Skype us: “hkinfosoft“.

To develop custom web app using Angular, please visit our technology page.