Angular2, Error: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0

expression has changed after it was checked. angular 7
expressionchangedafterithasbeencheckederror angular 8
expression has changed after it was checked. previous value 'ngif
expression has changed after it was checked previous value ngtemplateoutlet undefined
expression has changed after it was checked async pipe
expressionchangedafterithasbeencheckederror: expression has changed after it was checked. ngclass
angular 4 expression has changed after it was checked
previous value: 'ng-valid: true'. current value: 'ng-valid: false'.

I have used carousel in that i have used activeSlideIndex to get the number of that particular image. So i get an error in console

Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: '0'.

HTML Part:

   <carousel class="carousel slide"[(activeSlide)]="page.activeSlideIndex">
                <slide *ngFor="let image of images; let i = index ">
                  <p>Image {{i+1}}</p>
                  <img src="{{image.image}}" >
                  <p >
                    <input type="file" name="file" id="file" (change)="readUrl($event)" />
                    <label (click)="changed(page.activeSlideIndex)">Change</label>
                  </p>
                </slide>
              </carousel>

ts:

images:any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];

    changed(index){
        console.log(index);
      }

Try using ChangeDetectorRef to tell angular that there are new changes to the data sets of image.

so initially set

image.any = [];

constructor(private cdr: ChangeDetectorRef) {}

ngAfterViewInit() {
    this.image.any = [{image :'img1.jpg', change:'change'},{image: 'img2.jpg', change:'add'},{image:'img3.jpg', change:'edit'},{image:'im4.jpg',change:'delete' }];

    this.cdr.detectChanges();
  }

Check this for reference: https://stackblitz.com/edit/angular-pybs8e?file=app%2Fapp.component.ts

Angular Debugging "Expression has changed after it was checked", Why "Expression has changed after it was checked" is useful​​ Then the user clicks or hovers some unrelated UI elements which happen to trigger an event handler, and now another unrelated components is affected. This kind of error can be very hard to reproduce, troubleshoot and reason about. How to manage Angular2 “expression has changed after it was checked” exception when a component property depends on current datetime 2 Angular2 “expression has changed after it was checked” exception

It is hard to tell the exact problem when not all your code is shown, but I suggest reading this amazing article which describes this error and why it is happening https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4

ExpressionChangedAfterItHasBeenCheckedError is special check which is thrown only on dev mode if you view and model is possible out of sync for some reasons.

EXCEPTION: Expression has changed after it was checked. · Issue , EXCEPTION: Expression has changed after it was checked. object instance that is "equal" to the previous one in terms of keys / values but not in bug(perf): angular2/upgrade keeps running $rootScope.apply() if watchers  If a bound value is changed during change detection this exception is thrown. I assume it's caused by deliveryrequest.. For example a getter that returns different values when called subsequently.

try adding *ngIf="page.activeSlideIndex && images" like this:

<carousel *ngIf="page.activeSlideIndex && images" class="carousel slide" [(activeSlide)]="page.activeSlideIndex">
                <slide *ngFor="let image of images; let i = index ">
                  <p>Image {{i+1}}</p>
                  <img src="{{image.image}}" >
                  <p >
                    <input type="file" name="file" id="file" (change)="readUrl($event)" />
                    <label (click)="changed(page.activeSlideIndex)">Change</label>
                  </p>
                </slide>
              </carousel>

`ExpressionChangedAfterItHasBeenCheckedError` error, check that values passed down to the child components are the same I'll explain why in the last section of the article. Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Angular Debugging "Expression has changed after it was checked": Simple Explanation (and Fix) Expression has changed after it was checked. Previous value

Here is the solution which I found!!

First, detach change detector which will stop detecting any changes.

constructor( private cdRef : ChangeDetectorRef) {
   this.cdRef.detach();
}

Then, whenever you want to trigger changeDetector to paint the DOM, trigger manually.

ngOnInit() {
    this.dataProvider.getProductData('someProduct').subscribe(res => {
      this.product = _.get(res, '0');
      this.cdRef.detectChanges();
  })
}

If you have any child components, which makes changes to DOM, then trigger ChangeDetector there as well.

This solved my problem and increased the performance as well.

Angular 2 change detection: what the hell is “… has changed after it , Of course, the exception occurs in the previous versions as well. Previous value: … Error: Expression has changed after it was checked. When I try to apply the newValue to the component, it tells me the value has changed (in a bad way). Like you all have found, wrapping it in a setTimeout() "fixes" it; but, not in a good way. 👍 7

ExpressionChangedAfterItHasBeenCheckedError in Angular , This error is only thrown in develop mode and for good reason: it is an expression in your HTML has changed after Angular has checked it (it  This error is only thrown in develop mode and for good reason; it is often a sign that you should refactor your code, as Angular warns you that this change in your expression will not be picked up

Expression has changed after it was checked exception resolution in , Angular 2 Expression Changed after It Has Been Checked Exception. Resolution : Expression Duration: 3:19 Posted: Feb 2, 2017 ERROR Error: ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'undefined'. Current value: 'test'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Angular Debugging, ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was Duration: 6:30 Posted: Jan 30, 2018 I think I am experiencing the same thing now with the following error: Expression has changed after it was checked. Previous value: 'CD_INIT_VALUE'. Current value: 'message'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?

Comments
  • Thanks for the response @jana, but i am unable to solve that error
  • may be then the issue is not related to your images object. Try similar solution where you have your 'page.activeSlideIndex' defined. If still issue persists...reproduce in stackblitz and share the url..that way it is better to understand your issue clearly.
  • Thanks for the response, but i am not getting way to solve
  • Thanks for the response, but i am getting same error after adding also
  • ok, your error is binded to activateSlideIndex right? sorry i didn't see it. Instead of *ngIf="images", try using *ngIf="page.activeSlideIndex"
  • yes, exactly. the issue is with that activateSlideIndex
  • if, i remove that activateSlideIndex, then i face one more error with ng-select for using [multiple]="true"
  • that is for the carousel <slide>, i don't know it well but i think is necessary the activeSlideIndex when using *ngFor inside slides