Angular2, JavaScript libraries and TypeScript

Create an Angular2 project, following the quick start is a good choice Angular2 QuickStart.

I’m going to use bower to install Lory which is a simple carousel which can easily be used with ES6 imports

bower install lory --save

Now, following the Lory API we need to create a definition file for TypeScript, first we’ll create the defintion of the function used to create a Lory carousel

export declare function lory(el: any, options?: any) : Lory

And then we need to defined the return value, which is the API of the Lory carousel.

export declare class Lory {
    
    prev() : void
    
    next() : void
    
    slideTo(index: number) : void
    
    destroy() : void
}

We’ll save this into the ./lory.d.ts and update typings.json with this dependency

{
    "dependencies": {
        "lory": "file:lory.d.ts"
    }
}

Update the system.js config, add the following to map

var map = {
    'lory': 'bower_components/lory/dist/lory.js'
};

If using the Angular2 QuickStart, run npm install. Now you should be good to use the Lory from Angular2…

@Component({
    selector: "carousel",
    template: `
        <div class="slider js_slider">
            <div class="frame js_frame">
                <ul class="slides js_slides">
                    <li class="js_slide" *ngFor="let photo of photos">
                        <img [src]="photo">
                    </li>
                </ul>
            </div>
        </div>
        <button (click)="prev()">Previous</button>
        <button (click)="next()">Next</button>
    `,
    styles: [
        `.frame {
            width: 500px;
            position: relative;
            font-size: 0;
            line-height: 0;
            overflow: hidden;
            white-space: nowrap;
        }`,
        `.slides {
            display: inline-block;
        }`,
        `.slides li {
            position: relative;
            display: inline-block;
            width: 500px;
        }`,
        `.slides li img {
            width: 100%;
        }`
    ]
})
export class Carousel implements OnChanges {
    
    @Input()
    photos: Array<string>
    
    private lory : Lory
    
    constructor(private el: ElementRef) {}
    
    ngOnChanges(changes) {
        if (changes.photos) {
            if (this.lory) {
                this.lory.destroy()
            }
            setTimeout(() => this.lory = lory(this.el.nativeElement))
        }
    }
    
    next() : void {
        this.lory.next()
    }
    
    prev() : void {
        this.lory.prev()
    }
}

Find the sample project here