How to fix Angular NG0303: Can't bind to 'ngForTrack' since it isn't a known property of ...
Problem
When opening your Angular application in the browser, you see an error message such as
my.component.html:14 NG0303: Can't bind to 'ngForTrack' since it isn't a known property of 'div' (used in the '_MyComponent' component template).
1. If 'div' is an Angular component and it has the 'ngForTrack' input, then verify that it is included in the '@Component.imports' of this component.
2. To allow any property add 'NO_ERRORS_SCHEMA' to the '@Component.schemas' of this component.
Solution
First, ensure to add NgFor
to your imports
array in the module where you use ngFor="... ; trackBy ...
:
import { NgFor } from '@angular/common';
@Component({
imports: [
// ...
NgFor,
// ..
],
})
// ...
However, one of the most common sources of this error is an erroneous syntax: track by myTrackFunction
.
It needs to be used like this:
<div *ngFor="let item of items; trackBy: myTrackFunction">
so use trackBy: myTrackFunction
with trackBy
(without space), followed by a colon (:
) and then the function name of your tracking function!