Slick Carousel with Angular 2
<p>Hi I'm starting with Angular 2 and trying to make this carousel plugin to work: <a href="http://kenwheeler.github.io/slick/" rel="noreferrer">slick</a></p>

<p>After a while I managed to make it work like a Component like this:</p>

<pre><code>import { Component, Input, ElementRef, AfterViewInit, AfterContentInit} from '@angular/core';
declare var jQuery: any;

@Component({
    selector: 'slick-slider',
    template: `
        &lt;ng-content&gt;&lt;/ng-content&gt;
    `
})
export class SlickSliderComponent implements AfterContentInit{
    @Input() options: any;

    $element: any;

    defaultOptions: any = {};

    constructor(private el: ElementRef) {
    }

    ngAfterContentInit() {
        for (var key in this.options) {
            this.defaultOptions[key] = this.options[key];
        }

        this.$element = jQuery(this.el.nativeElement).slick(this.defaultOptions);
    }
}
</code></pre>

<p>And I would use it like this on a template:</p>

<pre class="lang-html prettyprint-override"><code>&lt;slick-slider&gt;
    &lt;div&gt;&lt;img class="btn btn-lg" src="/assets/img/img1.png" /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="btn btn-lg" src="/assets/img/img2.png" /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="btn btn-lg" src="/assets/img/img3.png" /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="btn btn-lg" src="/assets/img/img4.png" /&gt;&lt;/div&gt;
    &lt;div&gt;&lt;img class="btn btn-lg" src="/assets/img/img5.png" /&gt;&lt;/div&gt;
&lt;/slick-slider&gt;
</code></pre>

<p>This works fine. But when I try to use it inside *ngFor like this:</p>

<pre class="lang-html prettyprint-override"><code>&lt;slick-slider&gt;
    &lt;div *ngFor="let source of sources"&gt;
        &lt;img class="btn btn-lg" (click)="watchSource(source)" src="/assets/img/{{source.name}}.png" /&gt;
    &lt;/div&gt;
&lt;/slick-slider&gt;
</code></pre>

<p>It stops working. I assume is because the init of the slider is done before the <code>&lt;div&gt;</code> elements are being rendered. Because I end up with this rendered html:</p>

<pre class="lang-html prettyprint-override"><code>&lt;slick-slider class="slick-initialized slick-slider"&gt;
    &lt;div&gt;
      &lt;img ... &gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img ... &gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img ... &gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;img ... &gt;
    &lt;/div&gt;

    &lt;div aria-live="polite" class="slick-list draggable"&gt;
      &lt;div class="slick-track" role="listbox" style="opacity: 1; width: 0px; transform: translate3d(0px, 0px, 0px);"&gt;
        &lt;!-- Divs should be rendered here with slick styles included --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
&lt;/slick-slider&gt;
</code></pre>

<p>Any idea how to make this work? I tried using "ngAfterContentInit" and "ngAfterViewInit" neither seem to work. </p>

<p>This is the component using the SlickSliderComponent:</p>

<pre><code>import { Component, OnInit } from '@angular/core'
import { DeviceSource } from './device-source'
import { RemoteService } from './remote.service';

@Component({
    selector: 'device-selector',
    moduleId: module.id,
    templateUrl: 'device-selector.component.html',
    providers: []
})



export class DeviceSelectorComponent implements OnInit {

    sources: [DeviceSource];

    ngOnInit(): void {
        this.getDeviceSources();
    }

    constructor(private remoteService: RemoteService){}

    getDeviceSources(): void {
        this.remoteService.getDeviceSources().then(sources =&gt; this.sources = sources);
    }
}
</code></pre>

<p>And here is the service used:</p>

<pre><code>import { Injectable } from '@angular/core'
import { DeviceSource } from './device-source'

export const DEVICE_SOURCES:[DeviceSource]=
[
    {id: 1, dispayName: 'TV', name:'tv'},
    {id: 2, dispayName: 'Chrome', name:'chrome'},
    {id: 3, dispayName: 'Cable', name:'cable'},
    {id: 4, dispayName: 'XBox', name:'xbox'},
    {id: 4, dispayName: 'Pi', name:'pi'},

];


@Injectable()
export class RemoteService {
    getDeviceSources(): Promise&lt;[DeviceSource]&gt; {
        return Promise.resolve(DEVICE_SOURCES); 
    }
}
</code></pre>