Angular 2 Carousel

Angular 2 carousel is a component used to show elements in a circular way. Angular 2 carousel allows us to create a Slideshow. (Carousel)

angular 2 carousel example
angular 2 carousel example

live example at the end of the article

try angular 2 carousel
try angular 2 carousel

Angular 2 carousel can be used to show images in cycling mode. Using bootstrap.

build an Angular 2 Carousel example
build an Angular 2 Carousel example


Include bootstrap before we start (it’s easy : ) )

<link href=”” rel=”stylesheet”>

Let’s build an Angular 2 Carousel example.


 * Created by Tareq Boulakjar. from
import {Component} from 'angular2/core';
import {CORE_DIRECTIVES, FORM_DIRECTIVES} from 'angular2/common';
import {Slide} from './slide.component';
import {Carousel} from './carousel.component';

/*Angular 2 Carousel - Gallery*/
    selector: 'my-app',
                    <h2>Angular 2 Carousel - Gallery</h2>
                    <div class="row">
                      <div class="col-md-12">
                        <carousel [interval]="NextPhotoInterval" [noWrap]="loopSlides">
                          <slide *ngFor="#slidez of slides; #index=index"
                            <img [src]="slidez.image" style="margin:auto;">

                            <div class="carousel-caption">
                              <h3 style="background-color: transparent;color: white;">Slide {{index + 1}}</h3>
                              <p  style="background-color: transparent;color: white;">{{slidez.text}}</p>

                      <div class="col-md-12">
                        <button type="button" class="btn btn-info"
                                (click)="removeLastSlide()">Remove Last Slide

    directives: [Slide,Carousel, CORE_DIRECTIVES, FORM_DIRECTIVES],
export class Angular2Carousel  {
    //The time to show the next photo
    private NextPhotoInterval:number = 5000;
    //Looping or not
    private loopSlides:boolean = true;
    private slides:Array<any> = [];

    constructor() {

    private addNewSlide() {
            {image:'',text:'BMW 1'},
            {image:'',text:'BMW 2'},
            {image:'',text:'BMW 3'},
            {image:'',text:'BMW 4'},
            {image:'',text:'BMW 5'},
            {image:'',text:'BMW 6'}

    private removeLastSlide() {


Our example uses Typescript as programming language.


Download all files from here:angular-2-carousel