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