10 Mar

Angular Carousel Component

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

Note

UPDATE
This post has been updated to use the latest version of angular and bootstrap. I’m also using ng-bootstrap from now.



Packages

  "dependencies": {
    "@angular/animations": "^6.0.0",
    "@angular/common": "^6.0.0",
    "@angular/compiler": "^6.0.0",
    "@angular/core": "^6.0.0",
    "@angular/forms": "^6.0.0",
    "@angular/http": "^6.0.0",
    "@angular/platform-browser": "^6.0.0",
    "@angular/platform-browser-dynamic": "^6.0.0",
    "@angular/router": "^6.0.0",
    "core-js": "^2.5.5",
    "rxjs": "^6.1.0",
    "zone.js": "^0.8.26",
    "bootstrap": "^4.1.1",
    "jquery": "^3.3.1",
    "xml2js": "^0.4.19",
    "@ng-bootstrap/ng-bootstrap": "^2.0.0",
    "hoek": "^5.0.3"
  },
  "devDependencies": {
    "@angular/cli": "^6.0.0",
    "@angular/compiler-cli": "^6.0.0",
    "@angular/language-service": "^6.0.0",
    "@types/node": "^10.0.3",
    "codelyzer": "^4.3.0",
    "ts-node": "^6.0.2",
    "tslint": "^5.10.0",
    "typescript": "^2.8.3",
    "@types/xml2js": "^0.4.2"
  }

The component

app.component.html

This component will be injected into our main index.html. I’ve added a container class around it just for style. I’m adding an input ‘container’ so I can specify to my service from which Azure Blob container I want my images from. This part can be ignored for this post.

<div class="container">
  <carousel container="containername"></carousel>
</div>


carousel.component.html

This is the carousel itself. As you can see, ng-bootstrap makes it very easy to setup a carousel using bootstrap code.

<ngb-carousel>
    <ng-template ngbSlide *ngFor="let url of urls">
        <img [src]="url" alt="{{url}}"/>
    </ng-template>
</ngb-carousel>

carousel.component.ts

For the next part you’ll see that I’m injecting a carousel.service.ts. This is just to fetch the images. You can replace this easily with your way of fetching images. You’ll see im passing the container to the service to specifiy to Azure which images I want.

import { Component, OnInit, Inject, Input } from '@angular/core';

import { CarouselService } from './carousel.service';

@Component({
    selector: "carousel",
    templateUrl: './carousel.component.html',
    styleUrls: ['./carousel.component.scss']
})
export class CarouselComponent implements OnInit {
    @Input() container: string;
    
    urls: string[] = [];
    constructor(private carouselService: CarouselService) { }

    ngOnInit() {
        if (this.container !== undefined) {
            this.carouselService.get(this.container).subscribe(
                (urls: string[]) => this.urls = urls
            );
        }
    }
}

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

GitHub

https://github.com/JeffreyRosselle/angular-carousel-with-azure-blob



References

4 thoughts on “Angular Carousel Component

  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 *

This site uses Akismet to reduce spam. Learn how your comment data is processed.