Cannot read property 'slick' of undefined about ngx-slick HOT 10 CLOSED

@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>

from ngx-slick.

the same for me

from ngx-slick.

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)

from ngx-slick.

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.

from ngx-slick.

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.

from ngx-slick.

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

from ngx-slick.

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.

from ngx-slick.

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.

from ngx-slick.

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) => { };
	}
}`

from ngx-slick.

Closed. open new issue if any question.

from ngx-slick.