Slick-cloned slides are not tracked by angular

[rerion]

related to #31 #18

When using infinite mode, some slides are cloned.
These cloned slides don't have instances of directives/components attached to appropriate elements.
That's probably because slick itself handles cloning of slides, and it clones only DOM nodes, not angular instances.

This causes problems with any dynamic changes to slides.

See stackblitz:
https://stackblitz.com/edit/angular-chf3v8

Original carousel items are changed by code inside CarouselItemComponent, cloned slides are not.

[nishanc]

This is what I use as a workaround.

afterChange(changeEvent: any) {
    const elements = changeEvent.event.target.lastElementChild.firstChild.getElementsByClassName('slick-cloned') as HTMLElement[];
    for (const element of elements) {
      if(!element.classList.contains('listen')){
        element.classList.add('listen')
        element.addEventListener('click', (clickEvent: any) => {
          // Navigation logic here
        });
      }
    }
  }

Add (afterChange) to template

<ngx-slick-carousel
      class="carousel"
      #slickModal="slick-carousel"
      (afterChange)="afterChange($event)"
      [config]="marqueeConfig"
>

Based on anelad's comment