What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
NG0100, or ExpressionChangedAfterItHasBeenCheckedError, means a template-bound value changed after Angular had already checked it. Angular throws this error only in development mode, where an additional check helps reveal bindings that do not stay stable. Find the expression that changed, then fix when or how its value is updated rather than trying to trigger another check.
What NG0100 means
During change detection, Angular checks components and their template bindings. In development mode, it performs an additional check to verify that the values remain stable. If a binding has a different value after the check, Angular reports NG0100. The error is evidence of a timing or state-flow problem: something changed after the relevant view had been checked. Angular’s NG0100 guide explains the error and its diagnostic approach.
The error is not thrown in production mode, but that does not make an unstable binding harmless. A value that changes unexpectedly can still produce inconsistent UI behavior or contribute to repeated updates.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsFind the expression that changed
- Read the full error message. Look for the binding or expression Angular identifies.
- Follow the source-mapped stack trace. With Angular CLI source maps, trace the stack to the component template and the expression whose displayed value changed.
- Trace every writer. Search for code that assigns to or derives the value, including parent and child components, lifecycle hooks, template-called methods or getters, and signal effects.
- Check the timing. Determine whether the change occurs before the component is checked or after its content or view has been initialized.
A method or getter used in a template should return a stable result for the current state. It should not mutate state that another binding depends on. A template expression that changes state as a side effect can make the view unstable.
#1 Best Overall
Fix the update at its source
Angular traverses the component tree from top to bottom and checks each component once during a traversal. Its lifecycle guide advises against changing state in the middle of that process. Choose the fix based on what changed and when:
| Cause | Preferred correction |
|---|---|
| Initial component state is set too late | Set initial values in the constructor or ngOnInit, as appropriate, before the relevant template check. |
| State is derived from an input | Use ngOnChanges to respond to changed inputs before the component’s own template is checked. |
| A child changes state owned by its parent | Rework the data flow so the parent owns and updates its state at an appropriate point, rather than having a child mutate checked parent state. |
| A template method or getter changes state | Make it side-effect-free; update the state outside the template evaluation. |
| A signal effect copies one piece of state into another | Use a computed signal for derived state instead of propagating it through an effect. |
Why after-view and after-content hooks often trigger NG0100
ngAfterContentInit, ngAfterContentChecked, ngAfterViewInit, and ngAfterViewChecked run after Angular has initialized or checked the relevant content or view. Updating a value used by that view in these hooks can therefore change a binding after it was checked. Angular specifically warns that such mutations can cause NG0100.
These hooks are intended for work such as reading initialized content or view query results, not for repeatedly forcing state updates. The checked hooks also run frequently, so using them to make a value catch up can add unnecessary work. Move initialization earlier or redesign the state flow instead of relying on a later hook to force another update.
Signals and zoneless applications
For signal-based state, express a value derived from other state with computed. Angular cautions that using effects to propagate state can lead to NG0100, circular updates, or unnecessary change-detection cycles. See the signals effects guide.
Rank #3
In a zoneless application, changing a binding’s value also needs to produce a notification that lets Angular know it should update the view. Angular’s zoneless guide describes signals and ChangeDetectorRef.markForCheck() for cases where a production update is not being detected. That is a separate concern from fixing an NG0100 mutation: make the state flow stable first, then ensure the relevant update is notified.
A forms-specific exception: NgModel
Angular documents that NgModel triggers a second change-detection run to avoid this error when a value change originates in an input binding. This is behavior specific to NgModel; it is not a general-purpose pattern to copy into unrelated components. Angular’s NgModel API documentation describes the behavior.
Version and environment
The current Angular error guide states that NG0100 is thrown only in development mode. The precise diagnostics and behavior can vary across Angular releases and configurations, so check the documentation for the version your application uses. The lifecycle and zoneless guidance linked above reflects current Angular documentation.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
