Can't bind to 'ngforOf' since it isn't a known native property
<h4>Colors bad boys</h4>
<ul><li [ERROR ->]*ngfor="#color of colors">
<span>{{color.color | upperCase}}</span>
</li>
Trying to load the template via TemplateParser or RuntimeMetadataResolver and inject the overwtitten method in angular2 bootstrap e.g. for RuntimeMetadataResolver
The template loads its content correctly, but parsing fails with the error
Can't bind to 'ngforOf' since it isn't a known native property
Pay attention to the casing, it is *ngFor
(capital F
), not *ngfor
or ng-for
.
To fix your example, use:
...
<ul><li *ngFor="#color of colors">
...
Notice, again, it is *ngFor
, not *ngfor
.
Two plunkers showing the problem and correction:
Here's a plunker with that same error you have (look at app/app.component.ts and the console):
Can't bind to 'ngforOf' since it isn't a known native property
And then the exact same code, fixed, in this other plunker (just changed the F
of *ngFor
).
In recent versions of Angular we have @NgModule
s which require some additional configuration.
To get *ngFor
, in your app module you have to import BrowserModule
:
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
imports: [ BrowserModule ],
// ...
})
export class AppModule { }
In other modules, import CommonModule
:
import { CommonModule } from '@angular/common';
@NgModule({
imports: [ CommonModule ],
// ...
})
export class OtherModule { }