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
Angular’s NG8115 warning means an @for block refers to a tracking function without calling it. Pass the current loop item to that function—for example, change track trackByName to track trackByName(item). The call makes the expression return a tracking key for the item.
What NG8115 means
An @for block’s track expression tells Angular how to associate items in a collection with their rendered DOM views. Angular reports NG8115 when that expression contains a function reference that is not invoked. In that form, the expression supplies the function itself rather than the key the function should calculate.
For example, Angular’s diagnostic documentation contrasts these patterns:
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errors@for (item of items; track trackByName) {
...
}@for (item of items; track trackByName(item)) {
...
}The second expression calls the function with the current item, allowing it to return that item’s tracking key. See Angular’s NG8115 diagnostic documentation.
#1 Best Overall
How to fix NG8115
- Find the
@forexpression identified in the compiler diagnostic. - If its
trackclause names a function without parentheses, call the function with the loop variable. For example, usetrack trackByName(item)rather thantrack trackByName. - Check that the function returns a key that identifies items appropriately. For a collection that can change, use a unique, stable property such as
item.idwhen the data model guarantees that property is unique. - Build or check the project again and confirm the NG8115 warning is gone. If you expect the diagnostic but do not see it, check whether
strictTemplatesis enabled.
Calling the function corrects the specific uninvoked-function pattern; it does not make an unsuitable key reliable. Angular uses the key to match collection items to rendered views as items are inserted, removed, or moved. A key that identifies the same item across those changes helps Angular make the corresponding DOM updates. Angular’s @for API documentation recommends a unique property for changing collections; $index is suitable when the collection is static.
Choose a tracking key that fits the collection
- Collection can change or reorder: Use a unique, stable item identity, commonly a field such as
item.idif uniqueness is guaranteed. - Collection remains static: Tracking by
$indexis a straightforward option. - Using a tracking function: Invoke it with the current loop item and ensure its returned value has the identity behavior your collection needs.
Why NG8115 may not appear, and whether it blocks a build
Angular requires strictTemplates for extended diagnostics to be emitted. NG8115 has no additional configuration requirement. Extended diagnostics are warnings by default, so NG8115 ordinarily does not block compilation. A project can configure a diagnostic as a warning, an error, or suppressed; setting it to error makes compilation fail when the diagnostic is emitted. Angular explains these behaviors in its Extended Diagnostics documentation.
Suppressing the warning
Suppression is a configuration escape hatch, not the usual fix. If the team has a reason to hide NG8115, Angular documents this setting in the project’s TypeScript configuration:
Recommended Free Tools
{
"angularCompilerOptions": {
"extendedDiagnostics": {
"checks": {
"uninvokedTrackFunction": "suppress"
}
}
}
}Prefer correcting the track expression when the warning identifies an accidental function reference.
Rank #3
Do not confuse @for tracking with legacy *ngFor
NG8115 applies to the track expression in the newer @for template block. The older *ngFor directive instead accepts a trackBy function through its trackBy input; do not copy that directive syntax into an @for block. Angular marks NgFor deprecated since v20.0 and directs developers to use @for instead. See the NgFor API documentation.
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.
