ExpressionChangedAfterItHasBeenCheckedError: NguCarousel.isLast changes out of order

[qwiglydee]

  <ngu-carousel [inputs]="slides_conf" [dataSource]="slides_images" #slides>
    <ngu-item *nguCarouselDef="let item;">
      <img src="{{item.image}}" draggable="false" class="cover">
    </ngu-item>
    <button NguCarouselPrev [style.opacity]="slides.isFirst ? 0.5 : 1"></button>
    <button NguCarouselNext [style.opacity]="slides.isLast ? 0.5 : 1"></button>
  </ngu-carousel>

{
  "speed": 400,
  "easing": "ease",
  "point": {
    "visible": false
  },
  "touch": true,
  "loop": false,
  "grid": {
    "xs": 3,
    "sm": 3,
    "md": 3,
    "lg": 5,
    "all": 0
  },
  "type": "responsive"
}

Error happens when screen is lg and all 5 slides are loaded at once.

[bdairy]

any update on this ,, having the same issue

[kmturley]

I think it's an async issue with the data updating after the bindings. I solved using an onMove function to update controller variables so the variables always stay consistent with values:

<ngu-carousel #myCarousel [inputs]="carouselTile" [dataSource]="page.images" class="carousel" (onMove)="onCarouselMove($event)">
  <ngu-tile *nguCarouselDef="let image; let i = index">
    <div class="carousel-item">
        <img [src]="image" alt="Image" draggable="false" />
    </div>
  </ngu-tile>
  <button NguCarouselPrev class="carousel-arrow carousel-arrow-left" [disabled]="leftNavDisabled">&lt;</button>
  <button NguCarouselNext class="carousel-arrow carousel-arrow-right" [disabled]="rightNavDisabled">&gt;</button>
  <ul class="carousel-indicators" NguCarouselPoint [hidden]="points.length==0">
    <li *ngFor="let i of points; let i = index" [class.active]="i==myCarousel.activePoint" (click)="myCarousel.moveTo(i)"></li>
  </ul>
</ngu-carousel>

And then the controller:

@ViewChild('myCarousel') myCarousel: NguCarousel<any>;
leftNavDisabled = false;
rightNavDisabled = false;
points = [];

onCarouselMove() {
  if (this.myCarousel.pointNumbers) {
    this.points = this.myCarousel.pointNumbers;
  } else {
    this.points = [];
  }
  if (this.myCarousel.isFirst) {
    this.leftNavDisabled = true;
  } else {
    this.leftNavDisabled = false;
  }
  if (this.myCarousel.isLast) {
    this.rightNavDisabled = true;
  } else {
    this.rightNavDisabled = false;
  }
}

[bdairy]

Thanks for your reply,, it actually worked. best regards

[garhm]

It's possible to use data from $event instead. And your onCarouselMove will look this way

onCarouselMove(data) {
    this.points = data.points;
    this.isFirst = data.isFirst;
    this.isLast = data.isLast;
  }

[ryanlangton]

The onMove solution doesn't work if the window is resized, changing the number of items shown in the carousel

[shurricanex]

I found putting a condition on the data source helpful, in this case: *ngIf = "slides_images.length>0"