Exception: Can't bind to 'ngFor' since it isn't a known native property

Question

What am I doing wrong?

import {bootstrap, Component} from 'angular2/angular2'

@Component({
  selector: 'conf-talks',
  template: `<div *ngFor="talk of talks">
     {{talk.title}} by {{talk.speaker}}
     <p>{{talk.description}}
   </div>`
})
class ConfTalks {
  talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},
            {title: 't2', speaker: 'Julie', description: 'talk 2'}];
}
@Component({
  selector: 'my-app',
  directives: [ConfTalks],
  template: '<conf-talks></conf-talks>'
})
class App {}
bootstrap(App, [])

The error is

EXCEPTION: Template parse errors:
Can't bind to 'ngFor' since it isn't a known native property
("<div [ERROR ->]*ngFor="talk of talks">

Answer 1

I missed let in front of talk :

<div *ngFor="let talk of talks">

---

Note that as of beta.17 usage of #... to declare local variables inside of structural directives like NgFor is deprecated. Use let instead.

<div *ngFor="#talk of talks"> now becomes <div *ngFor="let talk of talks">

Original answer:

I missed # in front of talk :

<div *ngFor="#talk of talks">

It is so easy to forget that # . I wish the Angular exception error message would instead say:
you forgot that # again .

Answer 2

Another typo leading to the OP's error could be using in :

<div *ngFor="let talk in talks">

You should use of instead:

<div *ngFor="let talk of talks">

Answer 3

This Statement used in Angular2 Beta version.....

Hereafter use let instead of #

let keyword is used to declare local variable

Answer 4

在 angular 7 中通过将这些行添加到.module.ts文件来解决.module.ts ：

import { CommonModule } from '@angular/common'; imports: [CommonModule]

Answer 5

In my case, it was a small letter f . I'm sharing this answer just because this is the first result on google

make sure to write *ngFor

Answer 6

您应该使用 let 关键字 as 来声明局部变量，例如 *ngFor="let talk of talk"

Answer 7

In my case I made the mistake of copying *ng-for= from the docs.

https://angular.io/guide/user-input

Correct me if I am wrong. But it seems *ng-for= has been changed to *ngFor=

Answer 8

For me, to cut a long story short, I had inadvertently downgraded to angular-beta-16.

The let ... syntax is ONLY valid in 2.0.0-beta.17+

If you try the let syntax on anything below this version. You will generate this error.

Either upgrade to angular-beta-17 or use the #item in items syntax.

Answer 9

I forgot to annotate my component with " @Input " (Doh!)

book-list.component.html (Offending code):

<app-book-item
  *ngFor="let book of book$ | async"
  [book]="book">  <-- Can't bind to 'book' since it isn't a known property of 'app-book-item'
</app-book-item>

Corrected version of book-item.component.ts :

import { Component, OnInit, Input } from '@angular/core';

import { Book } from '../model/book';
import { BookService } from '../services/book.service';

@Component({
  selector: 'app-book-item',
  templateUrl: './book-item.component.html',
  styleUrls: ['./book-item.component.css']
})
export class BookItemComponent implements OnInit {

  @Input()
  public book: Book;

  constructor(private bookService: BookService)  { }

  ngOnInit() {}

}

Answer 10

Also don't try to use pure TypeScript in this... I wanted to more correspond to for usage and use *ngFor="const filter of filters" and got the ngFor not a known property error. Just replacing const by let is working.

As @alexander-abakumov said for the of replaced by in .

Answer 11

Just to cover one more case when I was getting the same error and the reason was using in instead of of in iterator

Wrong way let file in files

Correct way let file of files

Answer 12

In my case, the module containing the component using the *ngFor resulting in this error, was not included in the app.module.ts. Including it there in the imports array resolved the issue for me.

Answer 13

Use this

<div *ngFor="let talk of talks> 
   {{talk.title}} 
   {{talk.speaker}}
   <p>{{talk.description}} 
</div>

You need to specify variable to iterate over an array of an object

Answer 14

In my case,There should be no space between = and " ,

eg wrong :

*ngFor = "let talk of talks"

right :

*ngFor="let talk of talks"

Answer 15

Had the same problem because I had used
*ngFor='for let card of cards'
instead of:
*ngFor='let card of cards'

had for in the beginning like some "for loop"s which was wrong here
it worked, but had the error

Answer 16

In my case I was not declaring the loop variable inside the for loop I had

<div *ngFor="pizza of pizzas; index as i">

instead of

<div *ngFor="let pizza of pizzas; index as i">

After declaring it with 'let' it just worked for me.

Answer 17

hey for me the component was not properly imported in app.module.ts file after importing it everything works fine

@NgModule({ declarations: [ YourComponent, OtherComponents ],

imports: [...]

)}