How To Use Bootstrap Carousel In Angular 8

In this article, you will learn how to use Bootstrap Carousel in Angular 8.

Introduction 

 
In this article, I will explain how to create a Bootstrap Carousel in Angular 8. Carousel is a slideshow for cycling a series of images or videos. A carousel rotates the images horizontally or vertically with some effect.
 
Prerequisites
  • Knowledge of Angular 2 or higher
  • Visual Studio Code
  • Node and NPM installed
  • Bootstrap 
Step 1
 
Create an Angular project by using the following command.
 
ng new Bootstrapcarousel
 
How To Use Bootstrap Carousel In Angular 8
 
Step 2
 
Open this project in Visual Studio Code.
 
Expand the src folder and right-click on the Assets folder. Add a new folder under it and rename that to 'Images' and add some demo images to this folder.  
 
How To Use Bootstrap Carousel In Angular 8 
 
Step 3
 
Now, install Bootstrap by using the following command.
  1. npm install --save @ng-bootstrap/ng-bootstrap  
Step 4
 
Configure NgbModule in app.module.ts file. Let's import the required module in this file.
 
How To Use Bootstrap Carousel In Angular 8 
  1. import { BrowserModule } from '@angular/platform-browser';  
  2. import { NgModule } from '@angular/core';  
  3. import { AppRoutingModule } from './app-routing.module';  
  4. import { AppComponent } from './app.component';  
  5. import { CarouselComponent } from './carousel/carousel.component';  
  6. import { NgbModule } from '@ng-bootstrap/ng-bootstrap';  
  7.   
  8. @NgModule({  
  9.   declarations: [  
  10.     AppComponent,  
  11.     CarouselComponent  
  12.   ],  
  13.   imports: [  
  14.     BrowserModule,  
  15.     AppRoutingModule,NgbModule  
  16.   ],  
  17.   providers: [],  
  18.   bootstrap: [AppComponent]  
  19. })  
  20. export class AppModule { }  
Step 5
 
Now create a new component by using the following command.
 
ng g c Carousel
 
Step 6
 
Add the following code into carousel.component.ts file.
  1. import { Component, OnInit } from '@angular/core';  
  2. import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';  
  3. @Component({  
  4.   selector: 'app-carousel',  
  5.   templateUrl: './carousel.component.html',  
  6.   styleUrls: ['./carousel.component.css']  
  7. })  
  8. export class CarouselComponent implements OnInit {  
  9.   
  10.   constructor(config: NgbCarouselConfig) {  
  11.     config.interval = 2000;  
  12.     config.wrap = true;  
  13.     config.keyboard = false;  
  14.     config.pauseOnHover = false;  
  15.   }  
  16.   ngOnInit() {  
  17.   }  
  18.   
  19. }  
Step 7
 
Add the following HTML code in carousel.component.html file.
  1. <div class='container-fluid'>  
  2.     <div class="row" style="padding: 20px;">  
  3.         <div class="col-sm-12 btn btn-success">  
  4.             Use Bootstrap carousel in Angular 8 Project  
  5.         </div>  
  6.     </div>  
  7.     <div class='col-12'>  
  8.         <ngb-carousel>  
  9.             <ng-template ngbSlide>  
  10.                 <img src="../assets/Images/m2.jpg" alt="Delhi Metro">  
  11.                 <div class="carousel-caption">  
  12.                     <h3 style="color: yellow">Delhi Metro</h3>  
  13.                 </div>  
  14.             </ng-template>  
  15.             <ng-template ngbSlide>  
  16.                 <img src="../assets/Images/m1.jpg" alt="Bangalore Metro">  
  17.                 <div class="carousel-caption">  
  18.                     <h3 style="color: yellow">Bangalore Metro</h3>  
  19.                 </div>  
  20.             </ng-template>  
  21.             <ng-template ngbSlide>  
  22.                 <img src="../assets/Images/m4.jpg" alt="Channai Metro">  
  23.                 <div class="carousel-caption">  
  24.                     <h3 style="color: yellow">Channai Metro</h3>  
  25.                 </div>  
  26.             </ng-template>  
  27.             <ng-template ngbSlide>  
  28.                 <img src="../assets/Images/m5.jpg" alt="Jaipur Metro">  
  29.                 <div class="carousel-caption">  
  30.                     <h3 style="color: yellow">Jaipur Metro</h3>  
  31.                 </div>  
  32.             </ng-template>  
  33.             <ng-template ngbSlide>  
  34.                 <img src="../assets/Images/m3.jpg" alt="Mumbai Metro">  
  35.                 <div class="carousel-caption">  
  36.                     <h3 style="color: yellow">Mumbai Metro</h3>  
  37.                 </div>  
  38.             </ng-template>  
  39.         </ngb-carousel>  
  40.     </div>  
  41.   
  42. </div>  
Step 8
 
Open app.component.html and add the following code 
  1. <app-carousel></app-carousel>  
Step 9
 
Now, run the project and check the result.
 
How To Use Bootstrap Carousel In Angular 8
 

Summary

 
In this article, we learned how to implement Bootstrap Carousel in an Angular 8 project.