10 Mar

Angular 2 component for Bootstrap Carousel

Angular2
Angular 2 is the new kid on the block. It has some great potential to create a lot of nice apps.

In this post I’ll show you how to simply implement a Bootstrap carousel supported by Angular 2.

Note

This code is written with Angular v2.0.0 and Bootstrap V3.3.6

Although the code is written for Bootstrap V3, it will also work for Bootstrap V4.0.0-alpha.4.
You will need to change the code for the carousel itself since Glyphicon are not longer supported in Bootstrap V4.



The component

index.html

In this part well be setting the selector for Angular to target. Of course you’ll also have to import all needed scripts for Angular and Bootstrap to work, but I skipped this part as this may result in more <script>-tags then actual code that we need for this component.

<html>
    <head>
        <!-- Insert all css data here -->
    </head>
    <body>
        <carousel></carousel>

        <!-- Insert all needed scripts here -->
        <script>
            System.import('carousel.js');
        </script>
    </body>
</html>

carousel.html

This is the carousel itself. You might notice that I left out the description part and indicators. I’ve done this because I’ve only wanted the images, nothing else. Once you understand this component, it’ll be easy for you to add them back in if you want.

<div id="carousel-generic" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
        <div *ngFor="let url of urls" class="item" [ngClass]="{active: isActive(url)}">
            <img src="{{url}}" alt="{{url}}">
        </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
        <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
        <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>


carousel.ts

For the next part you’ll be needing to import a jQuery and a Bootstrap library for typescript.
Both can be found at github.com/DefinitelyTyped/DefinitelyTyped

/// <reference path="jquery.d.ts" />
/// <reference path="boodstrap.d.ts" />

import {Component} from '@angular/core';
import {Http} from '@angular/http';

@Component({
    selector: "carousel",
    templateUrl: 'carousel.html'
})

export class CarouselComponent {
    private start = false;
    urls = [];
    constructor(http: Http) {
            http.get('/getcarousel')
                .subscribe(res => this.startCarousel(res.json()));        
    }

    startCarousel(urls: string[]) {
        this.urls = urls;
        $('.carousel').carousel();
    }

    isActive(url: string) {
        return url === this.urls[0];
    }
}

That’s it for the component. Combining these and you should have your very own Angular 2 component for Bootstrap carousel.



References

4 thoughts on “Angular 2 component for Bootstrap Carousel

  1. Hi, thank you very much for this post. Unfortunately, for my, I get error importing carousel.js with System.import(‘carousel.js’); . Do you know how can that be solved?

    • Can you tell me which version of Angular u are using.
      The example was written in RC1 and at the moment they already advanced to RC5.
      I might try to update the post once Angular2 V1 is released.

      UPDATE
      Code has been updated to Angular 2.0.0

  2. Angular 2 Final is realeased…
    Can you please update the code. I wanted to have a carousel the way it works with bootstrap.
    TIA

Leave a Reply

Your email address will not be published. Required fields are marked *