Angular 13 Responsive Carousel with Ng Bootstrap Example

Angular Bootstrap Carousel tutorial, Throughout this step-by-step tutorial, you will learn how to implement a responsive Bootstrap carousel in the angular application using the Ng-Bootstrap library.

The ng bootstrap offers robust Angular widgets created from the basic with the help of Bootstrap CSS.

This package provides the immaculate set of useful APIs designed for the Angular ecosystem. Most importantly, this library doesn’t require any type of external dependencies or 3rd party JavaScript.

A carousel is a UI mechanism used to optimize view space similarly display subset of images or innumerable other content’s collection in a cyclic view.

A carousel has arrows (prev, next) bullet pagination, which allows you to explore the different content screens.

You will explore the detailed steps to add a bootstrap carousel in the angular using the ng-bootstrap package.

Angular 13 Bootstrap 5 Carousel Example

  • Step 1: Install New Angular Project
  • Step 2: Install Ng Bootstrap Package
  • Step 3: Register NgbModule in App Module
  • Step 4: Implement Bootstrap Carousel
  • Step 5: Test Carousel in Angular

Install New Angular Project

In the first step, we begin with installing a new angular app using the Angular CLI command. Nonetheless, you must have Angular CLI pre-installed on your development system.

ng new ng-bootstrap-carousel

Afterwards, move into the application root:

cd ng-bootstrap-carousel

Disable Strict Angular TypeStrict Errors

The latest version of Angular comes with strict mode, you have to manually disable the strict mode you can set “strict”: false, "noImplicitReturns": false and "strictTemplates": false inside the compilerOptions and angularCompilerOptions in tsconfig.json file.

Install Ng Bootstrap Package

In this step, execute the following command to install the bootstrap library in angular:

npm install bootstrap

The next step ascertains installing angular powered bootstrap; thereupon, use the following schematics to install the ng-bootstrap plugin.

ng add @ng-bootstrap/ng-bootstrap

Subsequently, open the angular.json file, register the bootstrap module CSS path inside the styles array:

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

Register NgbModule in App Module

Thereafter, open app.module.ts configuration file. Import the NgbModule from ‘@ng-bootstrap/ng-bootstrap’ module, plus register the NgbModule in imports array:

...
...

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


@NgModule({
  declarations: [],
  imports: [
  ...  
  ...
  NgbModule
  ],
  ...
  ...
})

export class AppModule { }

Implement Bootstrap Carousel

To manifest an image slider or carousel in the angular app, you need to define the ngb-carousel directive and declare the ng-template following the ngbSlide property.

The ng-template is the individual slider, which will display the carousel on the visible screen specifically.

Open app.comonent.html file likewise update the following code:

<ngb-carousel>
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/0000FF/808080C/" alt="Carousel One">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Aenean malesuada nisi ut commodo semper.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/FF0000/FFFFFF" alt="Carousel Two">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Aenean malesuada nisi ut commodo semper, Sit amet sagittis dolor.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide>
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/FFFF00/000000" alt="Carousel Three">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Commodo semper sit amet sagittis dolor.</p>
        </div>
    </ng-template>
</ngb-carousel>

Let us add NgbCarousel properties in a carousel to handle the carousel with more effective control.

<ngb-carousel
        [showNavigationArrows]="true" 
        [showNavigationIndicators]="true"
        interval="20000"
        [keyboard]="true"
        [pauseOnHover]="true"
        [wrap]="true"
        [activeId]="'sliderThree'">

    <ng-template ngbSlide id="sliderOne">
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/0000FF/808080C/" alt="Carousel One">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Aenean malesuada nisi ut commodo semper.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide id="sliderTwo">
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/FF0000/FFFFFF" alt="Carousel Two">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Aenean malesuada nisi ut commodo semper, Sit amet sagittis dolor.</p>
        </div>
    </ng-template>
    <ng-template ngbSlide id="sliderThree">
        <div class="picsum-img-wrapper">
            <img src="https://via.placeholder.com/600/FFFF00/000000" alt="Carousel Three">
        </div>
        <div class="carousel-caption">
            <h3>Title</h3>
            <p>Commodo semper sit amet sagittis dolor.</p>
        </div>
    </ng-template>

</ngb-carousel>

activeId: Carousel slide id which manifests at the beginning slide.

interval: The time interval between the slide cycling event from one slide to another.

pauseOnHover: When set to true, it refrains carousel to move to the next slide. However, the default value is true.

keyboard: Enable and disable intercommunication through the keyboard with carousel.

showNavigationIndicators: By default, this value is set to true; it displays the bullet indicators over the carousel, especially at the bottom.

showNavigationArrows: When set to true it displays the next and prev navigation arrows over the carousel. However, the default value is true.

wrap: This property is set to true by default; it starts the image slides all over again when it reached to last slide.

Test Carousel in Angular

You can now start the angular development server plus test the responsive angualr bootstrap carousel using the following command:

ng serve

Open the following url on the browser:

http://localhost:4200

Angular Responsive Bootstrap Carousel

Conclusion

Ultimately, this angular bootstrap carousel tutorial is over; this tutorial explained respectively how to implement responsive image slider in angular using the bootstrap package.

Not just that, we also shared with you how to use the NgbCarousel properties to bring more control to the carousel.