• “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

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