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';
  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 {
  10. constructor(config: NgbCarouselConfig) {
  11. config.interval = 2000;
  12. config.wrap = true;
  13. config.keyboard = false;
  14. config.pauseOnHover = false;
  15. }
  16. ngOnInit() {
  17. }
  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>
  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.