Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

Question

Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

I'm encountering a minor problem with Angular and its change detection mechanism. I have created a simple form where additional input fields can be added dynamically. However, every time I click the add button, an

ExpressionChangedAfterItHasBeenCheckedError

is thrown in the console. When I use a regular ngFor loop, the error appears in the console but the new input field is still displayed. On the other hand, when I utilize Angular's new @for directive, the error shows up in the console and the new input field does not appear on the screen. I have tried calling both detectChanges and markForCheck, but it did not resolve the issue.

public properties: Map<number, string> = new Map<number, string>();

public addProperty() {
  const id: number = this.properties.size ?
    Array.from(this.properties.keys()).reduce((a, b) => a > b ? a : b) + 1 : 1;

  this.properties.set(id, 'placeholder');
  this.changeDetectorRef.detectChanges();
}

<button class="btn btn-primary" (click)="addProperty()">+</button>

<div class="d-flex flex-column">
  <ng-container *ngFor="let attribute of properties.entries()">
    <span>{{ attribute[0] }}</span>
  </ng-container>
</div>

Any help to address this issue would be highly appreciated. Thank you in advance.

I have experimented with both ngFor and Angular's new @for, and found that the main difference is that the data added using @for is not displayed along with the console error. I also attempted manual change detection without success.

angular typescript ngfor angular-changedetection change-detector-ref

Answer 1

Answer №1

Angular's ngFor functionality is specifically tailored for arrays, which can sometimes cause confusion with change detection when dealing with references in maps. A simple solution is to convert the map into an array before passing it to ngFor, effectively resolving any potential change detection issues. Below is a functional example:

If you only need the keys or values, you can access them using properties.keys() or properties.values() respectively.

import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button class="btn btn-primary" (click)="addProperty()">+</button>
    <div class="d-flex flex-column">
      {{properties.entries() | json}}
      <ng-container *ngFor="let attribute of mapEntriesToArray;trackBy: trackByFn ">
        <span>{{ attribute[0] }}</span>
      </ng-container>
    </div>
  `,
})
export class App {
  public properties: Map<number, string> = new Map<number, string>();

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  get mapEntriesToArray() {
    return Array.from(this.properties.entries());
  }

  public addProperty() {
    const id: number = this.properties.size
      ? Array.from(this.properties.keys()).reduce((a, b) => (a > b ? a : b)) + 1
      : 1;

    this.properties.set(id, 'placeholder');
  }

  trackByFn(index: number, item: any) {
    return index;
  }
}

bootstrapApplication(App);

Check out the live demo on stackblitz

Answer 2

Angular's ngFor functionality is specifically tailored for arrays, which can sometimes cause confusion with change detection when dealing with references in maps. A simple solution is to convert the map into an array before passing it to ngFor, effectively resolving any potential change detection issues. Below is a functional example:

If you only need the keys or values, you can access them using properties.keys() or properties.values() respectively.

import { CommonModule } from '@angular/common';
import { ChangeDetectorRef, Component } from '@angular/core';
import { bootstrapApplication } from '@angular/platform-browser';
import 'zone.js';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule],
  template: `
    <button class="btn btn-primary" (click)="addProperty()">+</button>
    <div class="d-flex flex-column">
      {{properties.entries() | json}}
      <ng-container *ngFor="let attribute of mapEntriesToArray;trackBy: trackByFn ">
        <span>{{ attribute[0] }}</span>
      </ng-container>
    </div>
  `,
})
export class App {
  public properties: Map<number, string> = new Map<number, string>();

  constructor(private changeDetectorRef: ChangeDetectorRef) {}

  get mapEntriesToArray() {
    return Array.from(this.properties.entries());
  }

  public addProperty() {
    const id: number = this.properties.size
      ? Array.from(this.properties.keys()).reduce((a, b) => (a > b ? a : b)) + 1
      : 1;

    this.properties.set(id, 'placeholder');
  }

  trackByFn(index: number, item: any) {
    return index;
  }
}

bootstrapApplication(App);

Check out the live demo on stackblitz

Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

Answer №1

Similar questions

Creating HTML code using an array of objects

Authentication is needed when accessing ASP.NET Core 3.1 Angular with Windows. Please provide your username and

Angular service encountering duplicated arrays when retrieving data from Firebase using HTTP.get

User interaction with a checkbox triggers a state change in Angular

Using the typescript infer feature does not function properly when dealing with arrays

How to programmatically close a ngbDatePicker popup in Angular using TypeScript

Angular2 and the exciting world of Mapbox-gl

The Hapi response fails to display JSON data in a nested tree format

"Encountered a 'NextAuth expression cannot be called' error

The reloading feature in Angular components is not functioning as intended

Implementing dynamic styles for a checked mat-button-toggle in Angular 6

Error: The next.config.js file contains invalid options - The root value includes an unexpected property

I am a beginner in the world of Typescript/Angular, and I have encountered a compiling error TS2339. It seems that even when the condition *ngIf="x.length > 0;" should be false, the

Develop a module using the Angular plugin within the Eclipse IDE

Access exclusive content by subscribing now!

What is the best method for inserting a hyperlink into the JSON string obtained from a subreddit?

Incorporate JavaScript Library into StencilJs Using TypeScript

Exploring Rxjs repeatwhen with a delay in action

What is the best way to keep track of a checkbox's value after unchecking it and then returning to the same slide?

Is there a way to restrict an array to only accept distinct string literals?