Angular 4: The dreaded `ExpressionChangedAfterItHasBeenCheckedError` rears its ugly head, indicating that an expression has mutated

Question

Angular 4: The dreaded `ExpressionChangedAfterItHasBeenCheckedError` rears its ugly head, indicating that an expression has mutated

I am encountering an issue with every EventEmitter in my child module and despite trying, I cannot seem to find a solution for it.

ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'true'. Current value: 'false'.

The code that is triggering my EventEmitter looks like this:

ngOnChanges(changes: any) {
    if (changes.groupingTabValid) {
        if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
            this.groupingTabValidChange.emit(this.groupingTabValid);
        }
    }
}

This is the HTML snippet of my "main" component:

<year-overview-grouping [definitionDetails]="definitionDetails"
                        [fixedData]="fixedData"
                        [showValidation]="showValidation"
                        [groupingTabValid]="groupingTabValid"
                        (groupingTabValidChange)="setValidators('groupingTab', $event)">

</year-overview-grouping>

Which then triggers this function:

public setValidators(validator: string, e: boolean) {
    switch (validator) {
        case "groupingTab":             
            this.groupingTabValid = e;
            break;

        case "selectionTab":
            this.selectionTabValid = e;
            break;
    }

    if (this.groupingTabValid && this.selectionTabValid) {
        this.valid = true;
    } else {
        this.valid = false;
    }
}

1) Can you explain simply what is causing this error?

2) What measures can be taken to resolve this issue?

angular typescript eventemitter

Answer 1

Answer №1

Adhere to the one-way data flow principle

Consider delaying the emit function call by one tick using a setTimeout

if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
    setTimeout(() => this.groupingTabValidChange.emit(this.groupingTabValid), 0)
}

Answer 2

Adhere to the one-way data flow principle

Consider delaying the emit function call by one tick using a setTimeout

if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue) {
    setTimeout(() => this.groupingTabValidChange.emit(this.groupingTabValid), 0)
}

Answer 3

Answer №2

Simply include the ChangeDetectionStrategy module and insert this snippet into your component:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-bla-bla-bla',
  templateUrl: './xxxxx'
})

Answer 4

Simply include the ChangeDetectionStrategy module and insert this snippet into your component:

@Component({
  changeDetection: ChangeDetectionStrategy.OnPush,
  selector: 'app-bla-bla-bla',
  templateUrl: './xxxxx'
})

Answer 5

Answer №3

To avoid using the setTimeout function, you can notify Angular that changes are imminent after the initial check.

You have the option to include the ChangeDetectorRef in your component and utilize its markForCheck method.

/* ... */

constructor(private cdr: ChangeDetectorRef) {}

/* ... */

if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue {
  this.cdr.markForCheck();
  this.groupingTabValidChange.emit(this.groupingTabValid);
}

Answer 6

To avoid using the setTimeout function, you can notify Angular that changes are imminent after the initial check.

You have the option to include the ChangeDetectorRef in your component and utilize its markForCheck method.

/* ... */

constructor(private cdr: ChangeDetectorRef) {}

/* ... */

if (changes.groupingTabValid.currentValue !== changes.groupingTabValid.previousValue {
  this.cdr.markForCheck();
  this.groupingTabValidChange.emit(this.groupingTabValid);
}

Answer 7

Answer №4

As I delve into this particular exception type, it appears to serve the purpose of preventing feedback loops.

Upon closer examination, there doesn't seem to be a clear reason for passing the value down to the child and then back up to the parent. It is possible that the child component applies some additional logic, although in my opinion, it would be more appropriate to handle this logic within a service rather than a child component.

Although the provided plunker code does not include a loop, the Angular mechanism itself seems quite straightforward - simply rechecking values at the end of the cycle. It's worth noting that groupingTabValid in the given code enables direct feedback.

In terms of structural changes to the age parameter in the parent component, it can easily be managed within the parent. Utilizing a click event such as (click)=changeAge(age.value) and having a method (on the parent) like this:

changeAge(inputAge) {
  this.newAge = inputAge;
  this.person.age = inputAge;
}

For reference, here's a modified version of the plunker. You can find it here: Modified plunker
In this updated version, the child component still updates person.age, but without causing errors since the value remains consistent with what was set in the parent component.

Answer 8

As I delve into this particular exception type, it appears to serve the purpose of preventing feedback loops.

Upon closer examination, there doesn't seem to be a clear reason for passing the value down to the child and then back up to the parent. It is possible that the child component applies some additional logic, although in my opinion, it would be more appropriate to handle this logic within a service rather than a child component.

Although the provided plunker code does not include a loop, the Angular mechanism itself seems quite straightforward - simply rechecking values at the end of the cycle. It's worth noting that groupingTabValid in the given code enables direct feedback.

In terms of structural changes to the age parameter in the parent component, it can easily be managed within the parent. Utilizing a click event such as (click)=changeAge(age.value) and having a method (on the parent) like this:

changeAge(inputAge) {
  this.newAge = inputAge;
  this.person.age = inputAge;
}

For reference, here's a modified version of the plunker. You can find it here: Modified plunker
In this updated version, the child component still updates person.age, but without causing errors since the value remains consistent with what was set in the parent component.

Angular 4: The dreaded `ExpressionChangedAfterItHasBeenCheckedError` rears its ugly head, indicating that an expression has mutated

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

When a user reverts UI changes to their original values in Angular reactive forms, does the pristine state reset?

Using two type arguments, create a feature selector with ngrx

Can someone explain the distinction between 'return item' and 'return true' when it comes to JavaScript array methods?

Tips for implementing dependency injection with Dynamic Angular Components

Is it impossible to Build your Angular project?

Dealing with API Errors in Ngrx

The NgRx Effect causing an endless cycle of HTTP requests

Angular component communication issue - emitter malfunctioning

Utilize Angular 2 interceptor to incorporate HTTP requests

Encounter the issue of receiving 'undefined' as a response for data that was assigned within

What is the procedure for setting up the typings folder in AngularJS 1.5 with TypeScript?

Unable to choose Typescript as a programming language on the VSCode platform

Passing along the mouse event to the containing canvas element that utilizes chart.js

Angular Recursive Bootstrap Breadcrumb Guide

Retrieve the object attribute name through the request parameter in Express.js and Mongoose

Building a custom angular component library using the latest Angular CLI version 12

Depend on a mapping function to assign a value to every option within a discriminated union

Express throwing module errors

The concept of recursive generics in combination with array inference

Implementing authentication using http.post in Angular 2 with Django-Rest-Framework