title: Slick Carousel with Angular 2
body: <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>