Can't bind to 'ng-forOf' since it isn't a known native property [duplicate]

If you use alpha 52, check out the CHANGELOG.md in the GitHub repo. They changed the template to case-sensitive which is ngFor instead of ng-for (similar for all other directives)

Element names like <router-outlet> weren't changed though to stay compatible with custom elements spec which requires a dash in the tag name of custom elements.

In >= RC.5 (and final) ngFor and similar directives are not ambient by default. They need to be provided explicitly like

@NgModule({
  imports: [CommonModule],

or if you don't mind the module being locked to be browser-only

@NgModule({
  imports: [BrowserModule],

The BrowserModule exports CommonModule like also WorkerAppModule does.

Update

The BrowserModule should be imported in the app module, in other modules CommonModule should be imported instead.


With Angular 2.1.0+

It seems this is the same except you should import the BrowserModule in your app module and import CommonModule in others (you can't import BrowserModule twice with routes lazy-loading).

With Angular 2 rc5 :

This version introduced NgModules, you need to import BrowserModule in your module(s) in order to use ngFor, and ngIf:

BrowserModule registers critical application service providers. It also includes common directives like NgIf and NgFor which become immediately visible and usable in any of this modules component templates.

example:

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';


@NgModule({
  imports: [BrowserModule],
  providers: [],
  exports: [],
  declarations: []
})
export class MyModule { }

In Angular2 beta ng-for isn't correct. it should be *ngFor.


ngIf and ngFor are declared in CommonModule from @angular/common.

CommonModule contributes many of the common directives that applications need including ngIf and ngFor.

BrowserModule imports CommonModule and re-exports it. The net effect is that an importer of BrowserModule gets CommonModule directives automatically.

update your code as follow

import { CommonModule } from '@angular/common';

@NgModule({
imports: [CommonModule]
})
// In HTML
<li *ngFor="let customer of customers">{{customer.name}}</tr>

for more information Angular Module