Angular 12 Bootstrap Responsive Carousel slider

Angular 12 Bootstrap Responsive Carousel slider tutorial, in this tutorial I will explain how to use the Bootstrap 4 responsive carousel slider.

Bootstrap is the most popular HTML, CSS, and JavaScript framework for building a responsive web application, Bootstrap provides lots of widgets to use in our application, Bootstrap provides a carousel widget for slider.

Ng Bootstrap is a widgets library especially developed for JavaScript components for Angular Bootstrap, we can integrate any from core bootstrap with the help of Ng Bootstrap.

You can download the working example https://github.com/technostuf/angular-bootstrap-carousel

Angular 12 Bootstrap Responsive Carousel slider

• Create a new Angular 12 app
• Install the Bootstrap 4 package
• Install the ng-bootstrap package
• Import the modules
• Add code to the component file
• Add code in the view file
• Run an Angular 12 application

Step 1 – Create a new Angular 12 app

First of all, open your terminal and execute the below command to create a new Angular 12 app.

 ng new angular-app

Step 2 – Install the Bootstrap 4 package

In this step we will install a core bootstrap library to use bootstrap UI CSS and basic building blocks, this is required for the use of Ng Bootstrap.

 npm install bootstrap --save

After installing the bootstrap code package, add bootstrap CSS inside the angular.json file as we have shown in the below example, angular.json file is located at the root of the angular project, and open the file in your favorite code editor.

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

Step 3 – Install the ng-bootstrap package

Ng Bootstrap is an angular widget for core bootstrap in the angular project, run the below command in the terminal to install the ng-bootstrap package.

 npm install @ng-bootstrap/ng-bootstrap --save

Step 4 – Import the modules

To use an Ng Bootstrap module, we must need to register or add the module inside the app/app.module.ts, open the file and import the NgbModule module from @ng-bootstrap/ng-bootstrap package, plus import the NgbModule module to the imports array, see below code snippet.

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

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

Step 5 – Add code to the component file

Open the src/app/app.component.ts and add the below code, in the component file we can manage all the events and configuration variables in the component file.

images variable in the below code is the array of the images with content and you can change the settings like the interval, events with help of NgbCarouselConfig.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'angular-app';
  
  images = [
    {title: 'First Slide', desc: 'First Slide Description', src: "https://picsum.photos/id/102/900/500"},
    {title: 'Second Slide', desc: 'Second Slide Description', src: "https://picsum.photos/id/1020/900/500"},
    {title: 'Third Slide', desc: 'Third Slide Description', src: "https://picsum.photos/id/1024/900/500"}
  ];
  
  constructor(config: NgbCarouselConfig) {
    config.interval = 2000;
    config.keyboard = true;
    config.pauseOnHover = true;
  }
}

Step 6 – Add code in the view file

In this step we will add HTML code for generating a slider, ngb-carousel directive creates a wrapper around the angular bootstrap slider. ng-template is the core angular directive and ngbSlide is an ng-bootstrap directive that wraps the individual carousel slide.

<div class="container-fluid">  
  <h1>Angular Bootstrap Carousel</h1>    
  <ngb-carousel>
    <ng-template ngbSlide *ngFor="let image of images">
      <div class="wrapper">
        <img [src]="image.src" alt="slide">
      </div>
      <div class="carousel-caption">
        <h3>{{ image.title }}</h3>
        <p>{{ image.desc }}</p>
      </div>
    </ng-template>
  </ngb-carousel>      
  </div>

Step 7 – Run an Angular 12 application

Execute the following command on the terminal and run the angular app.

 ng serve OR ng serve --open

–open argument will open the application in a new tab.

You can download the working example of the Angular 12 Bootstrap Responsive Carousel slider.

https://github.com/technostuf/angular-bootstrap-carousel

Related Post

• How to use material chips(tags) in Angular?
• How to implement material spinner in Angular?
• Angular 12 autocomplete with API Data
• Angular 12 TinyMCE integration with an example
• Angular 12 Material Tabs Tutorial with Example
• Angular 12 Material Autocomplete Example
• Angular 12 Material Dialog Example
• How to bind HTML inside the angular binding?
• Angular 12 Bootstrap Responsive Carousel slider
• Angular 12 modal popup example with Bootstrap 4