Passing a variable from one child component to another triggers an ExpressionChangedAfterItHasBeenCheckedError in Angular

Question

Passing a variable from one child component to another triggers an ExpressionChangedAfterItHasBeenCheckedError in Angular

My situation involves passing information to two children components.

parent.component.html

<childA [loading]="loading">
    <childB (loadingChanged)="loadingChangedHandler($event)"></childB>
</childA>

parent.component.ts

loading = false;
constructor(){
   ......
}
loadingChangedHandler(loadingChild: boolean){
    this.loading = loadingChild;
  }

childB.component.ts (sending a variable to parent, which then goes to child A)

....
@Output() loadingChanged: EventEmitter<boolean> = new EventEmitter();
....
loadData() {
    this.loadingChanged.emit(true);
      this.service.readDate()
        .subscribe((data: any) => {
            ........
            this.loadingChanged.emit(false);
        })

  }

Lastly, in the childA component, I need to receive the variable and perform operations

childA.component.ts

@Input() loading: boolean = false
constructor() {
....}
....

In child A, I have a loading spinner that works fine, but I am encountering an error in the console:

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

How can I resolve this issue? I have looked into documentation (ngAfterViewInit) but I am struggling to understand why it's not working in my case.

angular typescript

Answer 1

Answer №1

When Angular detects changes in values passed to a child component, it triggers the ExpressionChangedAfterItHasBeenCheckedError. Learn more about this error here

To resolve this issue, you can utilize the AfterContentChecked life cycle hook in childA.component.ts

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Answer 2

When Angular detects changes in values passed to a child component, it triggers the ExpressionChangedAfterItHasBeenCheckedError. Learn more about this error here

To resolve this issue, you can utilize the AfterContentChecked life cycle hook in childA.component.ts

import { ChangeDetectorRef, AfterContentChecked} from '@angular/core';

  constructor(
  private cdref: ChangeDetectorRef) { }

  ngAfterContentChecked() {

    this.cdref.detectChanges();

  }

Answer 3

Answer №2

Important Note: When Angular is in development mode, it performs change detection twice.

During the first change detection phase, Angular detects a change in the loading property of the parent component. In the subsequent cycle, it detects another change in the loading property triggered by the child component. This causes an exception because the loading property was modified after it was already checked in the initial cycle.

Unlike in production mode where change detection only occurs once, using development mode helps us identify such errors early on to avoid data-view inconsistencies.

By placing the code that updates the loading property within a setTimeout function, it ensures that the code executes in the next tick once the previous change detection is completed.

For example, try triggering this.loadingChanged.emit(false); within setTimeout with a delay of 0 milliseconds:

setTimeout(() => {
  this.loadingChanged.emit(false);
}, 0);

Answer 4

Important Note: When Angular is in development mode, it performs change detection twice.

During the first change detection phase, Angular detects a change in the loading property of the parent component. In the subsequent cycle, it detects another change in the loading property triggered by the child component. This causes an exception because the loading property was modified after it was already checked in the initial cycle.

Unlike in production mode where change detection only occurs once, using development mode helps us identify such errors early on to avoid data-view inconsistencies.

By placing the code that updates the loading property within a setTimeout function, it ensures that the code executes in the next tick once the previous change detection is completed.

For example, try triggering this.loadingChanged.emit(false); within setTimeout with a delay of 0 milliseconds:

setTimeout(() => {
  this.loadingChanged.emit(false);
}, 0);

Passing a variable from one child component to another triggers an ExpressionChangedAfterItHasBeenCheckedError in Angular

Answer №1

Answer №2

Similar questions

Unique styling implementation for element situated underneath Angular 6 router-outlet

Leverage the power of TypeScript custom transformer and project reference for enhanced

Having trouble with Angular 5's Post function?

During the process of adding a new template to my Angular project, I came across an issue within the core.min.js and script.js files

Why isn't my Bootstrap affecting Angular?

Trigger parent Component property change from Child Component in Angular2 (akin to $emit in AngularJS)

Are there any methods to incorporate Facebook and Google login into an Ionic progressive web app (PWA)?

Utilize the power of Wikitude within an Angular 2 application

Include a log out option in the side menu of the ionic2 application

There seems to be an issue with transitioning the React.js page

Keeping track of important dates is ineffective using the calendar

Best practices for organizing API Services using TypeScript and Next.js Server Actions

Issue with accessing form in Angular 6 Reactive forms for custom validator functionality

Is there a way to toggle the visibility of the angular material toolbar at regular intervals?

Resolve the Angular proxy issue with the backend

Struggling to modify a string within my React component when the state is updated

Navigating the correct way to filter JSON data using HttpClient in Angular 4

angular2 : problem encountered with communication to rest api

The Tailwind CSS Chrome extension is causing disruptions on the websites I view

"Manipulating values in an array with a union type: a guide to setting and