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
Angular’s NG02200 error means NgFor received a value for which it could not find an iterable differ. Check the value supplied to *ngFor or ngForOf: use an iterable such as an array, set, or map to render collection items, or Angular’s KeyValue pipe when you intend to display an object’s keys and values. Angular’s NG02200 guidance describes both cases.
What NG02200 means
NgFor renders a template for each item in a collection. To do that, Angular needs an iterable differ: a strategy for detecting changes in an iterable so NgForOf can update the corresponding DOM. NG02200 appears when Angular cannot find a suitable differ for the value passed to the directive. See Angular’s IterableDiffer API for the differ’s role.
The important clue is the value at runtime, not just the declared type or the name of the variable. An expression may produce a different shape after a service call, pipe, or asynchronous binding. Angular’s error page names Array, Set, and Map as examples of iterable values.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Scan for outdated or missing drivers - takes under a minute3Repair Windows errors before they cause bigger problemsHow to troubleshoot NG02200
- Locate the failing binding. Find the
*ngFororngForOfexpression associated with the error. - Inspect its runtime value. Check what the expression evaluates to when Angular renders it, including any transformed or asynchronously supplied result.
- Match the value to the intended output. If the template should render collection members, make the binding produce an iterable such as an array, set, or map.
- Use a key/value iteration path for objects. If the source is a plain object and you want its entries, use Angular’s
KeyValuepipe rather than passing the object directly toNgFor.
There is no universal conversion for every object or API response. Choose a transformation that preserves the data and ordering your interface needs; do not convert an object to an array simply to silence the error if the template’s intended operation is to display its key/value pairs.
#1 Best Overall
Choose the fix that matches the data
| What you intend to render | Approach |
|---|---|
| Members of a collection | Supply an iterable, such as an array, set, or map, to the collection-oriented template. |
| Keys and values from a plain object | Use Angular’s KeyValue pipe to iterate the object’s entries. |
Angular’s NG02200 error documentation gives these as the two core remedy paths. The right one depends on what the data represents, not just on which syntax is easiest to change.
Should you replace NgFor with @for?
For existing templates, NG02200 still points to the value supplied to NgFor; diagnose the data shape first. For new or updated templates, check your Angular version: the NgFor API marks the directive deprecated since v20.0 and recommends the @for block. Changing template syntax does not by itself make an unsuitable input iterable, so ensure the expression has the shape required for the iteration you intend.
When custom iterable differs matter
Angular’s IterableDiffers API provides differ strategies and APIs to find, create, or extend them. Custom differ registration is a specialized option for custom iterable types; it is not the usual first fix for NG02200. Start by checking whether the template received the intended value and whether the data should be treated as a collection or as object entries.
Quick Recap
Rank #3
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.
