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">

Tidewater

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.

Tidewater

What exactly is the ampersand for? I fixed my own issues, but I am unsure of what this even does. – Ubiquitous

@datatype_void, the hash (#) is used to declare a local template variable – Tidewater

I tried using the "let" syntax instead of the # it produced the "Can't bind to 'ngFor' since it isn't a known native property". Same behavior as you saw in your original question. I changed it back to the # and it seemed to work without any issues. I am using angular2.0.0-rc.1 and I also got the same behavior with angular2.0.0-beta.17 – Trophozoite

@Chadley08, create a plunker. It should work. Here's a rc.1 punker and a beta.17 plunker that both work fine. – Tidewater

Here's an Angular issue about the error message being misleading: github.com/angular/angular/issues/10644 – Kashmiri

@PhilGibbins: There already was an answer reporting what you're mentioning as a possible cause of the error. Be sure to up-vote it, please :) – Dora

Fell in the same hole too, haha. Sneaky let. This saved me a couple of minutes of debugging. – Brumby

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">

Dora

Answer 3

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

Hereafter use let instead of #

let keyword is used to declare local variable

Monition

Answer 4

In angular 7 got this fixed by adding these lines to .module.ts file:

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

Plectognath

Surprised this doesn't have more upvotes. Totally forgot to import CommonModule in one of my modules and ran into this error myself. – Registration

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

Rotorua

Answer 6

You should use let keyword as to declare local variables e.g *ngFor="let talk of talks"

Relaxation

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=

Crippling

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.

Comber

Answer 9

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

Ithnan

Answer 10

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() {}

}

Outing

Answer 11

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.

Drunk

my issue was instead of "of" I was using "in" – Definiens

Answer 12

Use this

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

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

Goatskin

you have a typo in the code, need to close off the " – Smyrna

Answer 13

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

Margueritamarguerite

Answer 14

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.

Zephyr

Answer 15

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

e.g. wrong :

*ngFor = "let talk of talks"

right :

*ngFor="let talk of talks"

Vogele

Answer 16

For me the component was not properly imported in app.module.ts file. After importing it everything works fine

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

)}

Funambulist

Answer 17

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.

Evanish