Victor Leung
Victor Leung
BlogAI SolutionAlphaAlgoFlower shopFX CombineIEESushi ClassifierWealth Agile

Angular Error Explained: Expression Changed After It Has Been Checked Error

September 07, 2020

A colleague of mine encounters an error message while developing an Angular frontend app. The error message is like this:

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

The scenario for this error is when he’s developing a back button feature from the second page to the first page, where the first page is already rendered before, and need to re-render second time with different initial values.

The reason for this error is because, after each operation, Angular remembers what values it used to operate. They are stored in the oldValues property of the component view. After the checks have been done for all components, Angular then starts the next digest cycle, but instead of operating, it compares the current values with the ones it remembers from the previous digest cycle.

Note that this additional checking is only performed in the development mode. Angular enforce so-called unidirectional data flow from top to bottom. No component lower in the hierarchy is allowed to update the properties of a parent component after parent changes have been processed.

The possible solution of the above issues includes using async update, such as setTimeout or force change detection at ngAfterViewInit() with _changeDetectorRef.detectChanges(), where the ChangeDetectorRef class has the following 5 methods:

    abstract class ChangeDetectorRef {
      abstract markForCheck(): void
      abstract detach(): void
      abstract detectChanges(): void
      abstract checkNoChanges(): void
      abstract reattach(): void

So you can run change detection and update child view. My colleague was happy the error got resolved then after this explanation.

About Victor Leung

Software development professional with expertise in application architecture, cloud solutions deployment, and financial products development. Possess a Master's degree in Computer Science and an MBA in Finance. Highly skilled in AWS (Certified Solutions Architect, Developer and SysOps Administrator), GCP (Professional Cloud Architect), Microsoft Azure, Kubernetes(CKA, CKAD, CKS, KCNA), and Scrum(PSM, PSPO) methodologies.

Happy to connect

Continuous improvement

Copyright © 2023.