Using “ng-bootstrap” Components In Angular 5 App

In our last article, we learned “how to install and setup ng-bootstrap in our Angular 5 apps”.

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

• “ng-bootstrap” Checkbox based Buttons (using ngbButton)
• “ng-bootstrap” Alerts (using ngb-alert)
• “ng-bootstrap” Progress Bar (using ngb-progressbar)
• “ng-bootstrap” Carousels (using ngb-carousel)
• “ng-bootstrap” Rating widget (using ngb-rating)
• “ng-bootstrap” Modal Popup (using ng-template and ngbModal service)

In order to implement these components, we will have to configure NgbModule in our app module, i.e., app.module.ts file as we have seen in our last article and then we will able to use all ng-bootstrap components in our Angular app.

You can download the complete source code for this Angular ng-bootstrap demo project from here.

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” ProgressBar

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

 

Using “ng-bootstrap” Carousels

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

app.component.html

<h5>4. ng-bootstrap Carousels Demo</h5>
<ngb-carousel>
    <ng-template ngbSlide *ngFor="let img of images"> <img [src]="getImageSrc(img.imageName)" width="100%" height="500px">
        <div class="carousel-caption">
            <h3 class="text-center">{{img.name}}</h3>
        </div>
    </ng-template>
</ngb-carousel>
<hr>

ngb-carousel – It’s an directive which is used as a container element for the overall carousel. And inside of there, we have defined a number of slides and these slides have been defined by ng-template.

ng-template – It’s a directive which is used as slide with the help of ngbSlide directive.

ngbSlide – It’s a slide directive used by template.

carousel-caption – It’s a class value which is used to  give the caption over the slide.

app.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    NgbCarouselConfig
} from '@ng-bootstrap/ng-bootstrap';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [NgbCarouselConfig]
})
export class AppComponent {
    constructor(config: NgbCarouselConfig) {
        config.interval = 2000;
        config.wrap = true;
        config.keyboard = true;
    }
    images = [{
        name: "Cup",
        imageName: "cup.jpeg"
    }, {
        name: "Laptop",
        imageName: "laptop.jpeg"
    }, {
        name: "LoveTree",
        imageName: "love-tree.jpeg"
    }];
    getImageSrc(imageN) {
        return `assets/${imageN}`;
    }
}

Output

 

Using “ng-bootstrap” Rating Widget

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

app.component.html

<h5>5. ng-bootstrap Ratings Demo</h5>
<ngb-rating [(rate)]="rateValue" (hover)="hoverValue=$event"></ngb-rating>
<p>Rating value is {{rateValue}}</p>
<p>Hover Rating value is {{hoverValue}}</p>
<hr>

ngb-rating– It’s a directive which is used to show some rating based functionality for any Angular app provided by ng-bootstrap module.

rate – It’s a property which accepts aa numeric value that is going to be show the correct rating on the app.

app.component.ts

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

Output

 

Using “ng-bootstrap” Modal Popup

In order to implement bootstrap modal popup, we will have to use NgbModal service and ng-template provided by ng-bootstrap module, like below.

app.component.html

<h5>6. ng-bootstrap Modal Demo</h5>
<ng-template #content let-cl="close" let-di="dismiss">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title">Modal title</h5> <button type="button" class="close" (click)="cl('Closed from Close button')">

            <span aria-hidden="true">×</span>

          </button> </div>
        <div class="modal-body">
            <p>Modal body text goes here.</p>
        </div>
        <div class="modal-footer"> <button type="button" class="btn btn-secondary" (click)="di('Dismissed from dismiss button')">Dismiss</button> <button type="button" class="btn btn-primary" (click)="cl('Closed from Close button')">Close</button> </div>
    </div>
</ng-template> <button (click)="showModal(content)">Show Bootstrap Modal</button>
<hr>

ng-template– It’s a directive which is used to display bootstrap modal content.

#content – It’s a template reference variable which is able to pass the template to modal service.

let-cl – This is a way to stop modal popup being displayed. That means it is used to close the modal popup.

let-di – This is another way to stop modal popup being displayed. That means it is used to dismiss the modal popup.

app.component.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    NgbModal,
    ModalDismissReasons
} from '@ng-bootstrap/ng-bootstrap';
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(private modalService: NgbModal) {}
    showModal(content) {
        this.modalService.open(content).result.then(
            (closeResult) => {
                //modal close
                console.log("modal closed : ", closeResult);
            }, (dismissReason) => {
                //modal Dismiss
                if (dismissReason == ModalDismissReasons.ESC) {
                    console.log("modal dismissed when used pressed ESC button");
                } else if (dismissReason == ModalDismissReasons.BACKDROP_CLICK) {
                    console.log("modal dismissed when used pressed backdrop");
                } else {
                    console.log(dismissReason);
                }
            })
    }
}

Output

Summary

In this article, we covered a couple of ng-bootstrap directives and learned how to use them in Angular 5 apps.

Write to me in the comment box in case you need any help or you have any questions or concerns. Have a good day!