Carousel in Angular

In my last article we discuss on how to use DatePicker in angular forms. In these tutorial i discuss on how to add Bootstrap Carousel(slider) in our Angular Application.
First we need to add below line in our app.module.ts file.


.................
//we need to import first Carousel Module From Bootstrap.
import { CarouselModule } from 'ngx-bootstrap';
...................
@NgModule({
  .........
  imports: [
                CarouselModule.forRoot(),
            ...
           ]
})
export class AppModule(){}



After adding CarouselModule in the app module file. Now we can use these in any component.
Let’s start with basic Carousel in Component.



import { Component } from '@angular/core';
 
@Component({
  selector: 'carousel',
  templateUrl: './carousel.html'
})
export class CarouselComponent {}


In above example you can see the basic carousel in output. let's added slide with Caption



import { Component } from '@angular/core';
 
@Component({
  selector: 'carousel',
  templateUrl: './carousel.html'
})
export class CarouselComponent {}




Above example code display with title & Description of each slide. Let's now example of the slide with configration like set sliding time interval delay. For that first we need to import "CarouselConfig" from "ngx-bootstrap/carousel" now use in provider to set value like display in below example.



import { Component } from '@angular/core';
import { CarouselConfig } from 'ngx-bootstrap/carousel';
 
@Component({
  selector: 'carousel',
  templateUrl: './carousel.html',
  providers: [
    { provide: CarouselConfig, useValue: { interval: 900, noPause: true, showIndicators: true } }
  ]
})
export class CarouselComponent {}


Using above code we create easily slider in our Angular application.
Display Output of each Slider display below video.

Spread the love
  • 23
  •  
  •  
  •  
  •  
  •  
  •  
  •