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

AngularTypescriptAngular2 DirectivesNgfor

Angular Problem Overview


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

Angular Solutions


Solution 1 - Angular

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.

Solution 2 - Angular

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

Solution 3 - Angular

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

Hereafter use let instead of #

let keyword is used to declare local variable

Solution 4 - Angular

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

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

Solution 5 - Angular

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

Solution 6 - Angular

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

Solution 7 - Angular

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=

Solution 8 - Angular

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.

Solution 9 - Angular

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

Solution 10 - Angular

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

}

Solution 11 - Angular

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.

Solution 12 - Angular

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.

Solution 13 - Angular

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

Solution 14 - Angular

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

e.g. wrong :

*ngFor = "let talk of talks"

right :

*ngFor="let talk of talks"

Solution 15 - Angular

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

Solution 16 - Angular

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.

Solution 17 - Angular

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

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

)}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionMark RajcokView Question on Stackoverflow
Solution 1 - AngularMark RajcokView Answer on Stackoverflow
Solution 2 - AngularAlexander AbakumovView Answer on Stackoverflow
Solution 3 - AngularNaveenView Answer on Stackoverflow
Solution 4 - AngularAlferd NobelView Answer on Stackoverflow
Solution 5 - AngularMo KawsaraView Answer on Stackoverflow
Solution 6 - AngularRsonaView Answer on Stackoverflow
Solution 7 - AngularKris HollenbeckView Answer on Stackoverflow
Solution 8 - AngularShaunView Answer on Stackoverflow
Solution 9 - AngularRobin MathurView Answer on Stackoverflow
Solution 10 - Angularpaulsm4View Answer on Stackoverflow
Solution 11 - AngularshamoxView Answer on Stackoverflow
Solution 12 - AngularRoy TouwView Answer on Stackoverflow
Solution 13 - AngularAkshay S PatilView Answer on Stackoverflow
Solution 14 - Angularuser3727574View Answer on Stackoverflow
Solution 15 - AngularhamthiiiView Answer on Stackoverflow
Solution 16 - AngularJeyson MgView Answer on Stackoverflow
Solution 17 - AngularTimmy DchouneView Answer on Stackoverflow