Cannot read property 'slick' of undefined

[namrastanov]

Hi.

If there are no items in the slick element we get the error "Cannot read property 'slick' of undefined" when try to leave the page.

You should check for undefined in unslick() method

[iphilippenko]

the same for me

[oveshparasara]

ngx-slick.umd.js In which there are two code blocks:
SlickComponent.prototype.ngOnDestroy = function () { this.unslick(); };
SlickItemDirective.prototype.ngOnDestroy = function () {
this.carousel.removeSlide(this)

so the real problem is if we are using "slick" inside OneComponent and then we are navigating to TwoComponent, then due to routing OneComponent get destroys along with our "slick" configuration variable.
And after that our "slick" library runs above two blocks which need component's slick configuration, which is not available because it's already destroyed and we get mentioned error.(Cannot read property 'slick' of undefined)

[depiction]

This is a duplicate of #6

You can use the ngIf structural directive to only include the element or component containing the carousel if there is at least one slide.

[vgflutter]

depiction:you answer always same. The problem born when leave a view that has a slide for a new view. Do you explain me how I should use that ngif?

I have a template:

  <a [routerLink]="['/event', 3]">bye bye</a>
  <div class="card">
    <h5 class="card-header">..</h5>
    <div class="card-block">
      <ngx-slick *ngIf="slides && slides.length" class="carousel" #slickModal="slick-modal" [config]="slideConfig">
        <div ngxSlickItem *ngFor="let slide of slides[0]" class="slide">
          ..
        </div>
      </ngx-slick>
    </div>
  </div>

If a click on element a, it crash.

[depiction]

@Feof In my application I get this error if a user tries to navigate to another view (regardless of whether or not the new view has a carousel or not) before slide data has been received.

The following code worked for me.

I'm getting slide data from an API in the parent component. Once a response from the API has been received, I set loaded to true and pass the slides array to my carousel component.

<ng-container *ngIf="loaded else loading">
    <app-carousel [slides]="slides" *ngIf="(slides && slides.length)"></app-carousel>
</ng-container>

[vgflutter]

Your context is very specific.
All persons, except you, have my same problem.
Tomorrow I see the source code.
Is app-carousel a directive ?
I do not know why you do not have this problem

[depiction]

app-carousel is a component.

When creating a component using the Angular CLI, the component's selector, by default, is always "app-[component-name]".

Feel free to try my technique, which requires moving the carousel to a separate component.

[vgflutter]

Also I have a separate component. I have </ component> and inside ngx-slick. you use that slides, I do not know what to do. However, I think the author left the project.

[emmahoggan]

I'm using the slider inside of a modal that may or may not be opened, and I get the error when navigating if the modal was never opened, so there are some unique factors. Preferably, the library would be changed to null check before calling unslick. But I got around it for now with this kludge-y bit of code:

` ngAfterContentInit() {

	if (this.isVisible) {
		this.ngxSlick.initSlick();
	}
	else {
		this.ngxSlick.$instance = {};
		this.ngxSlick.$instance.slick = (input) => { };
	}
}`

[devmark]

Closed. open new issue if any question.