“ng-bootstrap” components to make imposing Angular 5 App

In our previous article, we had covered “ng-bootstrap components for Angular 5 apps“. Here, we will add few other important bootstrap components provided by ng-bootstrap module. Below is the components’ list followed by their detail information and example.

• “ng-bootstrap” Carousels (using ngb-carousel)
• “ng-bootstrap” Rating widget (using ngb-rating)
• “ng-bootstrap” Modal Popup (using ng-template and ngbModal service)

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
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.