Using “ng-bootstrap” Components in Angular 5 App
- “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.
To develop custom web app using Angular, please visit our technology page.
Content Source:
- c-sharpcorner.com