What Causes Error: NG0100?

This error occurs when a property or value bound to a component template changes during the change detection process. Common causes include:

• Modifying properties directly within lifecycle hooks like ngOnInit or ngAfterViewInit.
• Updating values triggered by asynchronous operations.
• Direct DOM manipulations affecting bound properties.
• Using setTimeout, Promise, or other async methods to modify data without notifying Angular.

Common Scenarios and Solutions

1. Modifying Properties in Lifecycle Hooks

Changing a property's value during ngOnInit or ngAfterViewInit:

// Incorrect
export class AppComponent implements AfterViewInit {
    title = 'Initial Title';

    ngAfterViewInit() {
        this.title = 'Updated Title'; // Error: NG0100
    }
}

Solution: Use ChangeDetectorRef to trigger change detection manually:

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

export class AppComponent implements AfterViewInit {
    title = 'Initial Title';

    constructor(private cdr: ChangeDetectorRef) {}

    ngAfterViewInit() {
        this.title = 'Updated Title';
        this.cdr.detectChanges();
    }
}

2. Asynchronous Data Updates

Modifying properties using asynchronous operations:

// Incorrect
export class AppComponent {
    data: string;

    ngOnInit() {
        setTimeout(() => {
            this.data = 'Async Update'; // Error: NG0100
        }, 1000);
    }
}

Solution: Wrap the update in Angular's NgZone or ChangeDetectorRef:

// Correct
import { NgZone } from '@angular/core';

export class AppComponent {
    data: string;

    constructor(private zone: NgZone) {}

    ngOnInit() {
        setTimeout(() => {
            this.zone.run(() => {
                this.data = 'Async Update';
            });
        }, 1000);
    }
}

3. Direct DOM Manipulation

Making changes to DOM elements outside Angular's control:

// Incorrect
import { ElementRef } from '@angular/core';

export class AppComponent {
    constructor(private el: ElementRef) {}

    ngAfterViewInit() {
        this.el.nativeElement.querySelector('h1').textContent = 'Updated Text'; // Error: NG0100
    }
}

Solution: Use Angular bindings or Renderer2 for DOM manipulations:

// Correct
import { Renderer2 } from '@angular/core';

export class AppComponent {
    constructor(private renderer: Renderer2, private el: ElementRef) {}

    ngAfterViewInit() {
        this.renderer.setProperty(
            this.el.nativeElement.querySelector('h1'),
            'textContent',
            'Updated Text'
        );
    }
}

4. Using Async Pipes Incorrectly

Misconfiguring bindings for observables:

// Incorrect
export class AppComponent {
    data$ = new BehaviorSubject('Initial Data');

    ngOnInit() {
        this.data$.next('Updated Data'); // Error: NG0100
    }
}

Solution: Let Angular handle async updates using the async pipe:

// Correct
<div>{{ data$ | async }}</div>

Debugging NG0100 Errors

• Inspect Error Message: Angular's error includes details about the property and its location in the component template.
• Log Lifecycle Hooks: Add console logs in lifecycle hooks to identify where the update occurs.
• Use Angular DevTools: Analyze change detection cycles to trace property updates.
• Check Async Operations: Ensure all async updates are wrapped in Angular's zone or manually trigger change detection.

Best Practices to Prevent NG0100 Errors

• Avoid directly modifying properties in ngOnInit or ngAfterViewInit.
• Use ChangeDetectorRef to trigger change detection explicitly for late updates.
• Prefer Angular bindings or Renderer2 for DOM manipulations.
• Handle asynchronous updates properly with NgZone or the async pipe.
• Test lifecycle hooks and async operations thoroughly during development.

Conclusion

The Error: NG0100: Expression has changed after it was checked is a common Angular error that ensures data consistency during change detection. By understanding its causes and implementing the solutions outlined in this article, developers can create stable and predictable Angular applications.

FAQs

1. What does NG0100: Expression has changed after it was checked mean?

This error occurs when a property bound to a template changes during the change detection cycle, causing inconsistencies.

2. How do I fix NG0100 errors?

Use ChangeDetectorRef, NgZone, or async pipes to manage updates properly.

3. Can direct DOM manipulation cause this error?

Yes, modifying the DOM outside Angular's control can lead to NG0100 errors.

4. How do I debug NG0100 errors?

Inspect error messages, log lifecycle hooks, and use Angular DevTools to trace updates.

5. How can I prevent NG0100 errors in Angular projects?

Follow best practices for lifecycle hooks, async updates, and DOM manipulation.