angular 2 : Using slick carousel inside a template

[kostalihas]

I use slick carousel as a component in my angular project ; this slick component is like below :

@Component({
    selector: 'slick-slider',

    template: `
        <ng-content></ng-content>`,
    styleUrls:['./slick.component.css']  
    })
export class SlickSliderComponent implements AfterViewInit{
  @Input() options: [any];
    $element: any;

    constructor(private el: ElementRef) {}
ngAfterViewInit() {
this.$element = jQuery(this.el.nativeElement).slick(this.options);  }
 }

in the template of foodsComponent who use this slick component I have a menu of 7 tab list each one fetch different content:

<ul class="resp-tabs-list">
<li (click)="onGetFoodsByCategorie(1)"></li>
<li (click)="onGetFoodsByCategorie(2)"></li>
<li (click)="onGetFoodsByCategorie(3)"></li>
..
..</ul>
<slick-slider class="slick-slider" *ngIf="foods" > 

    <div class="item"  style="width: 450px;" *ngFor= "let food of foods">
    <div class="thumbnail-menu-modern" >  
..
..
</slick-slider>

Onload the page the slick work fine because I display the first menu cause of this function on foodsComponent ngOnInit() {this.onGetFoodsByCategorie(1);} but when I click in any menu the slick dosnt work I find the reason why this is happening is because the plugin itself drastically modifies the html that is generated by the *ngfor leaving angular unable to update the repeater as it no longer can identify the structure. How -.Uninitialize the plugin. -.Update the repeater. -.Reinitialize the plugin.