EXCEPTION: Template parse errors: Can't bind to 'ngForFrom' since it isn't a known native property

Question

I have searched for this here and here. I am using version 2.0.0-beta.7 for angular 2 but it is giving me error like this:

EXCEPTION: Template parse errors:
Can't bind to 'ngForFrom' since it isn't a known native property ("<h2>list of fruits</h2>

<ul>
<li [ERROR ->]*ngFor="#item from itemList">{{item.name}}</li>
</ul>"): ItemComponent@2:4
Property binding ngForFrom not used by any directive on an embedded template ("<h2>list of fruits</h2>
<ul>

As per know it is using camel casing, but it is not working for me.

Here is my .ts file:

import {Component} from "angular2/core";

@Component({
selector:'my-list'
template:`<h2>list of fruits</h2>
<ul>
<li *ngFor="#item from itemList">{{item.name}}</li>
</ul>`
})

export class ItemComponent{
public itemList=[
{name:"Apple"},
{name:"Orange"},
{name:"Grapes"}
];

}

@Lenilson de Castro Seems he is using old version so `let` won't work — yurzui, Nov 14 '16 at 18:49
umm, not so sure but in older version of angular 2 you would had to import and inject this directive like `import {NgFor} from 'angular2/angular2'` then provide it like a directive on the @Component (or @View) `@Component( directives: [NgFor], template.....` — lenilsondc, Nov 14 '16 at 19:02

score 2 · Accepted Answer · answered Dec 06 '16 at 05:04

Please use latest released version of Angular 2 and modify your code as below.

import { Component } from "@angular/core";

@Component({
    selector: 'my-list',
    template:   `<h2>list of fruits</h2>
                <ul>
                    <li *ngFor="let item of itemList">{{item.name}}</li>
                </ul>`
})

export class ItemComponent {
    public itemList = [
        { name: "Apple" },
        { name: "Orange" },
        { name: "Grapes" }
    ];

}

Main changes compared to your code:

import {Component} from "angular2/core";

to

import { Component } from "@angular/core";

And

<li *ngFor="#item from itemList">{{item.name}}</li>

to

<li *ngFor="let item of itemList">{{item.name}}</li>

EXCEPTION: Template parse errors: Can't bind to 'ngForFrom' since it isn't a known native property

1 Answers1