ngu-carousel

ngu-carousel copied to clipboard

Get this error, while using nguCarousel custom points: ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngForOf: '. Current value: 'ngForOf: 0,1'. The same error you can see in official sandbox. What you think about this?

@weterbogov Hi,

It is not an error. This message occurs when the data changed on change detection happens. This will be removed on production build. Will fix this later

Thanks

source => https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained

I workaround this issue with that:

import { Component, OnInit, ChangeDetectionStrategy } from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})

@weterbogov @angelserranoperez Also detectChanges,

import { Component, OnInit, ChangeDetectionStrategy, AfterViewInit, ChangeDetectorRef} from '@angular/core';

@Component({
    changeDetection: ChangeDetectionStrategy.OnPush
    selector: -
    ......
})
export class AppComponent Implements AfterViewInit {
   constructor(private cdr: ChangeDetectorRef) {}

   ngAfterViewInit() {
    // this is used to renderer the carousel changes
     this.cdr.detectChanges();
   }
}

@sheikalthaf any ETA on this ? It Makes the carousel unusable (I can't change the changeDetection strategy, it breaks everything else in my app)

I really need this fixed

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;
  }
}

We had the same problem, and we tried fixing it with the solution from @kmturley (thanks!) but we also needed to have the points set when the carousel was created, which we got around by using a setter on the view child:

On the component:

@ViewChild('myCarousel')
set _myCarousel(myCarousel: NguCarousel) {
    this.myCarousel = myCarousel;
    setTimeout(() => {
        this.points = myCarousel.pointNumbers;
    });
}

carouselIsFirst = true;
carouselIsLast = false;
points: any[] = [];

onCarouselMove(myCarousel: NguCarousel) {
    this.carouselIsFirst = myCarousel.isFirst;
    this.carouselIsLast = myCarousel.isLast;
    if (myCarousel.pointNumbers) {
        this.points = myCarousel.pointNumbers;
    } else {
        this.points = [];
    }
}

and in the html:

<ngu-carousel #myCarousel class="carousel" [inputs]="carouselTile" [dataSource]="dataSource" (onMove)="onCarouselMove($event)">

Thanks for making awesome carousel for me and Angular community. But please fix it, I know it's not a critical one but in Angular 9 if this error happens debugger will call every time we recompile app .... It's annoying.

Hey @cqduydev, Sure I recently started managing this, will take care of this bug in next release.

@santoshyadavdev Any updates on this issue?