Slick Carousel with Angular 2

Question

Hi I\'m starting with Angular 2 and trying to make this carousel plugin to work: slick

After a while I managed to make it work like a Component like this:

Answer 1

You should add *ngIf directive to your slick-slider so it is inserted into DOM after data source is populated, in this case it is variable sources:

<slick-slider *ngIf="sources">
    <div *ngFor="let source of sources">
        <img class="btn btn-lg" (click)="watchSource(source)" src="/assets/img/{{source.name}}.png" />
    </div>
</slick-slider>

Answer 2

In my case the trick with *ngIf was not enough. Im calling REST service in ngOnInit and receiving response where in subscription I'm defining the array. The only possible workaround for me was to add slick items manually by slick function 'slickAdd' directly from typescript.

jQuery('.my-slick').slick('slickAdd', '<div><h3>ahoj</h3></div>');

Maybe it will help somebody...