Notify the Directive on changes Angular2

Question

I have a problem, help solve I have a component with a template

ul(slider)
    li(*ngFor="let car of getRecentCars()")
        car-poster(bcg="{{car.recentBackgroundUrl}}",  image="{{car.indexImage}}")

And the directive slider

@Directive({
    selector: '[slider]'
})
export class sliderDirective{
    private el: HTMLElement;

    constructor(@Inject(ElementRef) elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
        let _this = this;
        setTimeout(function(){
            $(_this.el).slick({
                infinite: false,
                slidesToShow: 1,
                slidesToScroll: 1
            });
        }, 0);


    }

}

But the directive is triggered before the data in the component how to do that it would be possible to postpone the launch directive rendering component

Answer 1

You could leverage the component / directive lifecycle hooks like ngAfterViewChecked:

Here is a sample:

@Directive({
    selector: '[slider]'
})
export class sliderDirective{
    private el: HTMLElement;

    constructor(@Inject(ElementRef) private elementRef: ElementRef) {
        this.el = elementRef.nativeElement;
    }

    ngAfterViewChecked() {
      $(this.el).slick({
             infinite: false,
             slidesToShow: 1,
             slidesToScroll: 1
      });
    }
}

See this doc for more details:

• https://angular.io/docs/ts/latest/guide/lifecycle-hooks.html