Angular 11 Bootstrap responsive carousel tutorial; this comprehensive example shows you how to create a responsive image and content carousel in an angular application using the npm NG Bootstrap package.

Ideally, Bootstrap is a great and popular user interface library that makes front-end developers’ life effortless and well-off by providing tons of reusable UI utility components. Out of those numerous UI components, we will learn about the Bootstrap carousel component. We will show you how to use the bootstrap carousel in the Angular app to display the image and text in a cyclic view using the ng-bootstrap library.

Theoretically, Ng Bootstrap is a widgets library especially developed for JavaScript components for Angular Bootstrap, and It does not require 3rd party JavaScript or external dependencies. We will add ng bootstrap in angular to create an image and content carousel or slider, and the good thing is you won’t need additional efforts to make it responsive.

Angular 11 Bootstrap Image and Content Carousel (Slider) Example

Let us start this Angular 11 Bootstrap carousel example, and here are the bit by bit steps that you have to follow.

• Step 1: Set Up Angular Environment
• Step 2: Install Bootstrap Package
• Step 3: Update NgbModule in App Module
• Step 4: Create Bootstrap Carousel in Angular
• Step 5: Add Custom Prev Next Navigation Arrows
• Step 6: Run Angular App

Set Up Angular Environment

Make sure you have node package manager installed and fully configured on your device. Use the given below command to install Angular CLI:

npm install -g @angular/cli

Now you can use the command line tool to work with angular platform, hence use command to install the angular app:

ng new angular-carousel-example

Next, get inside the project root:

cd angular-carousel-example

Install Bootstrap and Ng-Bootstrap Libraries

On the console type both commands to install Bootstrap and Ng Bootstrap packages simultaneously:

npm install bootstrap

npm install @ng-bootstrap/ng-bootstrap

Next, open the angular.json file and add the bootstrap CSS path as given below:

],
"styles": [
  "src/styles.scss",
  "node_modules/bootstrap/dist/css/bootstrap.min.css"
]

Update NgbModule in App Module

In this step, you have to import NgbModule from the ‘@ng-bootstrap/ng-bootstrap’ package; additionally, keep this module inside the imports array:

Add the following code in the app.module.ts file:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    NgbModule    
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Create Bootstrap Carousel in Angular

Define the ngb-carousel directive, its creates a wrapper around the angular bootstrap slider. The ng-template directive is a slide that represents the slide in a carousel, and it is evoked using the ngbSlide property.

Now, head over to the app.component.html and update the given below code in the file:

<ngb-carousel>
  <ng-template ngbSlide>
    <div class="img-block">
      <img src="https://loremflickr.com/g/1200/800/paris" alt="Img 1">
    </div>
    <div class="carousel-caption">
      <h3>Li Europan lingues</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="img-block">
      <img src="https://loremflickr.com/1200/800/brazil,rio" alt="Img 2">
    </div>
    <div class="carousel-caption">
      <h3>On refusa continuar</h3>
      <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut.</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="img-block">
      <img src="https://loremflickr.com/1200/800/paris,girl/all" alt="Img 3">
    </div>
    <div class="carousel-caption">
      <h3>Plu sommun paroles</h3>
      <p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
    </div>
  </ng-template>
</ngb-carousel>

Add Custom Prev Next Navigation Arrows

We will show you how to easily create custom navigation arrows in the angular slider to go forth and back using ngb-carousel properties; additionally, we will also create a pause button to stop auto rotate slider.

Open and add the following code in the app.component.html file:

<div class="container mt-3">
  <ngb-carousel #carousel>
    <ng-template ngbSlide>
      <div class="img-block">
        <img src="https://loremflickr.com/g/1200/800/paris" alt="Img 1">
      </div>
      <div class="carousel-caption">
        <h3>Li Europan lingues</h3>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="img-block">
        <img src="https://loremflickr.com/1200/800/brazil,rio" alt="Img 2">
      </div>
      <div class="carousel-caption">
        <h3>On refusa continuar</h3>
        <p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut.</p>
      </div>
    </ng-template>
    <ng-template ngbSlide>
      <div class="img-block">
        <img src="https://loremflickr.com/1200/800/paris,girl/all" alt="Img 3">
      </div>
      <div class="carousel-caption">
        <h3>Plu sommun paroles</h3>
        <p>At vero eos et accusamus et iusto odio dignissimos ducimus.</p>
      </div>
    </ng-template>
  </ngb-carousel>

  <div class="text-center">
    <button (click)="prevSlide()">Prev</button>
    <button (click)="nextSlide()">Next</button>
    <button (click)="stopSlider()">Stop</button>
  </div>
</div>

Eventually, update the app.component.ts file with suggested code:

import { Component, OnInit, ViewChild } from '@angular/core';
import { NgbCarousel } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})

export class AppComponent implements OnInit {
  
  @ViewChild('carousel', { static: true }) carousel: NgbCarousel;

  ngOnInit() { }

  prevSlide() {
    this.carousel.prev();
  }

  nextSlide() {
    this.carousel.next();
  }

  stopSlider() {
    this.carousel.pause();
  }

}

Run Angular App

At last you have to start the application using the ng serve command, hence move to console and execute the recommended command:

ng serve

Use the following url to test the angular carousel app:

http://localhost:4200

If somehow you see following error on the console:

Angular 9 introduced a global ‘$localize()’ function that needs to be loaded

You should install the angular localize package with the below command:

npm install @angular/localize

Then, open polyfills.ts file and import ‘@angular/localize/init’ to remove the angular global ‘$localize()’ error.

import '@angular/localize/init';

Conclusion

So this was it, we have learned how to implement ng bootstrap carousel in angular and how to create custom previous next navigation in angular using bootstrap library. We reckon you would share it with others and must have liked this angular 11 carousel tutorial.