Re-initializing after change

[phantomodm]

Hello,

I'm running a situation where I am changing slide sources based on input. Basically i'm filtering the loaded images based on a criteria.. What is command to reinitialize the slider using (afterChange) emitter?

Thanks.

[jjz4689]

I've also run into the same issue, and I find that the slider shows some odd behaviour when filtering/reordering items the slider.

Tried the (afterChange) event emitter, but it never seems to fire. I've also tried a manual unslick and slick through the code, using a ViewChild for the slider, but that doesn't appear to work.

My workaround for now - if it helps anyone - is to use an *ngIf on the ngx-slick in the component template, and then essentially remove and add the slider back in when I need to change the items in the slider.

Example;

In the template:

<ngx-slick *ngIf="showSlider">...</ngx-slick>

and in my update function:

updateItems(): void {
  // update the items in the list
  // ...

  this.showSlider = false; // property in the component the *ngIf of the slider is bound to
  setTimeout(() => this.showSlider = true, 0);
}

You can obviously initialize the showSlider elsewhere for displaying the slider by default, so I've not included it in my example.

Simply setting the showSlider to false, and then straight to true does nothing, as there has been no digest cycle in between.

The way to get around this, is to use a 0 second setTimeout(...), which will cause a re-evaluation of the bindings, causing the slider to be removed from the DOM, and then placed back in straight away.

It is this placing it back in the DOM which causes the slick to be "new" again, and initialize itself - this time, using the updated list items.

Hope to have a proper solution to this problem; however, in the meantime I hope my example above helps anyone else out who's having this problem.

[phantomodm]

cool work around.. thanks Geoff

On Thu, Feb 14, 2019 at 4:31 PM Geoff James [email protected] wrote:

I've also run into the same issue, and I find that the slider shows some odd behaviour when filtering/reordering items the slider.

Tried the (afterChange) event emitter, but it never seems to fire. I've also tried a manual unslick and slick through the code, using a ViewChild for the slider, but that doesn't appear to work.

My workaround for now - if it helps anyone - is to use an *ngIf on the ngx-slick in the component template, and then essentially remove and add the slider back in when I need to change the items in the slider.

Example;

In the template:

<ngx-slick *ngIf="showSlider">...

and in my update function:

updateItems(): void { // update the items in the list // ...

this.showSlider = false; // property in the component the *ngIf of the slider is bound to setTimeout(() => this.showSlider = true, 0); }

You can obviously initialize the showSlider elsewhere for displaying the slider by default, so I've not included it in my example.

Simply setting the showSlider to false, and then straight to true does nothing, as there has been no digest cycle in between.

The way to get around this, is to use a 0 second setTimeout(...), which will cause a re-evaluation of the bindings, causing the slider to be removed from the DOM, and then placed back in straight away.

It is this placing it back in the DOM which causes the slick to be "new" again, and initialize itself - this time, using the updated list items.

Hope to have a proper solution to this problem; however, in the meantime I hope my example above helps anyone else out who's having this problem.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/devmark/ngx-slick/issues/40#issuecomment-463805596, or mute the thread https://github.com/notifications/unsubscribe-auth/Ad3Tzsb8i59WUoH4oxzjWFX7LEMSbi4Sks5vNdWXgaJpZM4V2nIR .

-- Andre Jacobs NYStixs Wood Bats LLC http://www. http://www.nystixs.com9positions.com http://www.facebook.com/9positions http://www.pinterest.com/9positions 844-966-3228