Angular 13 carousel example with Ng-Bootstrap

We'll learn how to integrate and employ bootstrap 5 with Angular 13 by developing an example carousel application step by step.

In this article, we'll create a carousel using the current version of Angular 13 and Bootstrap 5.

We'll go through the process of configuring and integrating an Angular 13 project using the Bootstrap 5 CSS framework. Following that, we'll demonstrate how to build a carousel.

Angular 13 Carousel Example with Bootstrap 5

The carousel is a slideshow that cycles through a collection of contents. It is created with CSS 3D transforms and a little JavaScript. It is capable of displaying a sequence of pictures, text, or custom markup. Additionally, it provides previous/next buttons and indicators.

Prerequisites

Before getting started you need a few prerequisites:

• Basic knowledge of TypeScript. Particularly the familiarity with Object Oriented concepts such as TypeScript classes and decorators.
• A local development machine with Node 10+, together with NPM 6+ installed. Node is required by the Angular CLI like the most frontend tools nowadays. You can simply go to the downloads page of the official website and download the binaries for your operating system. You can also refer to your specific system instructions for how to install Node using a package manager. The recommended way though is using NVM — Node Version Manager — a POSIX-compliant bash script to manage multiple active Node.js versions.

Note: If you don't want to install a local Angular development environment but still want to experiment with the code in this article, you may use Stackblitz, an online IDE for frontend development, to build an Angular project compatible with the Angular CLI.

Step 1 — Installing Angular CLI 13

Let's begin by setting up Angular CLI 13 on our system.

Initiating and working with Angular projects may be done using the official Angular CLI. You'll need to open a new command-line interface and type in the command:

$ npm install -g @angular/cli

Angular/cli v13 will be installed on your machine at the time of authoring this guide.

Step 2 — Creating a New Angular 13 App

In the next stage, we'll create our project from scratch. Run the following commands in your command-line interface:

$ cd ~
$ ng new angular13carousel

The CLI will ask you a couple of questions — If Would you like to add Angular routing? Type y for Yes and Which stylesheet format would you like to use? Choose CSS.

Next, go to the folder containing your project and execute the following commands to start the local development server:

$ cd angular13carousel
$ ng serve    

Make sure that your app is operating by going to the URL http://localhost:4200/.

Step 3 — Installing Ng-Bootstrap

Next, we need to install ng-bootstrap using the following command:

$ ng add @ng-bootstrap/ng-bootstrap

This library provides an Angular implementation for Bootstrap 5. Only Bootstrap 5 CSS was used to build these Angular widgets, which have APIs specifically tailored to the Angular framework.

Angular, Bootstrap 5, and Popper are the only dependencies.

Open the src/app/app.component.ts file and update it as follows:

import { Component } from '@angular/core';
import { NgbCarouselConfig } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [NgbCarouselConfig]  // add NgbCarouselConfig to the component providers

})
export class AppComponent  {

  images = [700, 800, 807].map((n) => `https://picsum.photos/id/${n}/900/500`);

  constructor(config: NgbCarouselConfig) {
    // 
    config.interval = 2000;
    config.keyboard = true;
    config.pauseOnHover = true;
  }

}

We import NgbCarouselConfig and add it to the providers array of the component, next we inject it via the constructor and use it to customize default values of carousels used by this component and its children. We set the interval between slides to two seconds, enabled the keyboard to move slides, and pause on hover on each slide.

We also defined an array of images to use for slides.

Next, open the src/app/app.component.html file and update it as follows:

<div class="container-fluid">
<h1>
Angular 13 Carousel Example
</h1>
<h2>Full tutorial in Techiediaries</h2>
<ngb-carousel *ngIf="images">
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[0]" alt="Random first slide">
    </div>
    <div class="carousel-caption">
      <h3>First Slide</h3>
      <p> Angular 13 Carousel Example </p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[1]" alt="Random second slide">
    </div>
    <div class="carousel-caption">
      <h3>Second Slide</h3>
      <p> Check out Techiediaries</p>
    </div>
  </ng-template>
  <ng-template ngbSlide>
    <div class="wrapper">
      <img [src]="images[2]"  alt="Random third slide">
    </div>
    <div class="carousel-caption">
      <h3>Third Slide</h3>
      <p>for full tutorial...</p>
    </div>
  </ng-template>
</ngb-carousel>
</div>

We use ng-template with the ngbSlide directive for add a carousel slide and we use HTML to define the content for the slide.

Next, open the src/app/app.component.html file and add the following styles:

ngb-carousel .wrapper {
  position: relative;
  height: 0;
  padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .wrapper>img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

You can play with this example from https://stackblitz.com/edit/angular-10-carousel-example

Summary

In this angular tutorial, we've seen how to create a carousel with rich slides in Angular 13 using ng-bootstrap.

• Date: 22 Apr 2022