slick-slider in angular2 not working

I need to intagrate slick-caroussel into a componont.template.html in angular2 type script using as backEnd for my laravel5.4 project using webpack typescripts and gulp; In the component I import jquery and slick-caroussel this is in my component :

 ngOnInit() {

   jQuery('.slick-slider').slick({ dots: false, fade: true, arrows: true,loop :true,swipe:true  });
  }

And in the template I do :

<div data-items="1" data-xs-items="1" data-sm-items="2" data-md-items="3" data-lg-items="3" data-xl-items="5" data-center-padding="10"
  class="slick-slider slick-tab-centered" *ngIf="foods">

<app-food *ngFor= "let food of foods" [food]="food"></app-food>


</div>

I get my Data but nothing change the slick caroussel not working.

via MedKostali