Can't bind to 'ngforOf' since it isn't a known native property

Question

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

Answer 1

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).

---

Lastest Angular versions

In recent versions of Angular we have @NgModules 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 { }