ExpresionChangedAfterItHasBeenCheckedError

[jph2658]

Has anyone else seen this?

Happy to provide more information if needed.

ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'. at viewDebugError (core.es5.js:8426) at expressionChangedAfterItHasBeenCheckedError (core.es5.js:8404) at checkBindingNoChanges (core.es5.js:8568) at checkNoChangesNodeInline (core.es5.js:12440) at checkNoChangesNode (core.es5.js:12414) at debugCheckNoChangesNode (core.es5.js:13191) at debugCheckRenderNodeFn (core.es5.js:13131) at Object.eval [as updateRenderer] (Ng2Carouselamos.html:44) at Object.debugUpdateRenderer [as updateRenderer] (core.es5.js:13113) at checkNoChangesView (core.es5.js:12236)

<div class="sr-amazon-items" ng2-carouselamos [width]="1024" [items]="amazonItems" [$item]="itemTemplate" [$prev]="prevTemplate"
       [$next]="nextTemplate">
  </div>
  <ng-template #prevTemplate>
    <button md-icon-button>
      <i class="mdi mdi-chevron-left mdi-24px"></i>
    </button>
  </ng-template>
  <ng-template let-item let-i="index" #itemTemplate>
    <div class="sr-amazon-item">
      <md-card>
        <md-card-header>
          <md-card-title>{{item.title}}</md-card-title>
        </md-card-header>
        <img mat-card-image class="sr-amazon-item-image" src="{{item.medium_image}}" alt="{{item.title}}" />
        <md-card-actions>
          <button md-raised-button>Add</button>
        </md-card-actions>
      </md-card>
    </div>
  </ng-template>
  <ng-template #nextTemplate>
    <button md-icon-button>
      <i class="mdi mdi-chevron-right mdi-24px"></i>
    </button>
  </ng-template>

[jph2658]

More info...

It seems to only happen when I hit the next button and reach the last item in the carousel.

Then... I can continue to scroll to the right indefinitely without it looping around or showing additional items, which may be a side affect.

[joselcvarela]

Hey @jph2658 The error message you provided tells that the error is in "Ng2Carouselamos.html:44". So I checked file Ng2Carouselamos.html line 44 and it's related with template binding. Once your template don't change along time I can't understand why this is happening. And then I checked angular repo and few people are reporting the same problem. So I think maybe it's angular related. But once I have free time I will try to test your code.

[snimmaga9]

Hi, I get the same error. Any fix for this problem? As soon as i reach the end of the list i get the above error and when clicking the items in the carousel is only scrolling to the left instead of doing their own click actions. please advice.

[snimmaga9]

Ng2Carouselamos.html:44 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'false'. Current value: 'true'. at $t (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101) at zt (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101) at ne (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:101) at vr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) at dr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) at Zr (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) at n (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) at Object.eval [as updateRenderer] (Ng2Carouselamos.html:44) at Object.$r [as updateRenderer] (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) at ur (vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:150) View_Ng2Carouselamos_6 @ Ng2Carouselamos.html:44 t.logError @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:234 t.handleError @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:192 (anonymous) @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 r.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 t.runOutsideAngular @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 e.tick @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 (anonymous) @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 onInvoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59 t.invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 r.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 t.run @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 e.object.o @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 e.__tryOrUnsub @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24 e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24 e._next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24 e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:24 e.next @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:312 e.emit @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:206 ot @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59 at @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59 onInvokeTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:59 t.invokeTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 r.runTask @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 invoke @ vendor.js?v=rCDrRGP5_DJ0Bwc1embXA_u5gf4-7nCV8T8XRfo8x0I:975 Ng2Carouselamos.html:44 ERROR CONTEXT t {view: {…}, nodeIndex: 0, nodeDef: {…}, elDef: {…}, elView: {…}}

[volpejoaquin]

Any update of this ? I also need this fix.

[aniketavhad13]

When i open slider in browser, I got the same issue. Screenshot is attached

[pcriado]

It seems this happens because a ViewChild is being accessed from ngAfterViewInit() with default change detection. The error went away when I switched to OnPush strategy for the component.

[PragadeeshwaranPasupathi]

Any one solved this issue ?

[aminesafi8]

This issue can be solved simply by injecting into the constructor private cdRef: ChangeDetectorRef And in the ngAfterViewInit cycle hook just call the method detectChanges() ngAfterViewInit(): void { this.cdRef.detectChanges(); }

[Trueander]

This issue can be solved simply by injecting into the constructor private cdRef: ChangeDetectorRef And in the ngAfterViewInit cycle hook just call the method detectChanges() ngAfterViewInit(): void { this.cdRef.detectChanges(); }

Thanks a lot, I did it and it worked.