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    lt div  ngFor  talk of talks  gt         talk title   by   talk speaker         lt p gt   talk description       lt  div gt      class ConfTalks     talks      title   t1   speaker   Brian   description   talk 1                 title   t2   speaker   Julie   description   talk 2        Component     selector   my-app     directives   ConfTalks     template    lt conf-talks gt  lt  conf-talks gt      class App    bootstrap App        The error is  EXCEPTION  Template parse errors  Can t bind to  ngFor  since it isn t a known native property    lt div  ERROR - gt   ngFor  talk of talks  gt

User · Accepted Answer

I missed let in front of talk    lt div  ngFor  let talk of talks  gt      Note that as of beta 17 usage of      to declare local variables inside of structural directives like NgFor is deprecated  Use let instead    lt div  ngFor   talk of talks  gt  now becomes  lt div  ngFor  let talk of talks  gt   Original answer   I missed   in front of talk    lt div  ngFor   talk of talks  gt    It is so easy to forget that     I wish the Angular exception error message would instead say  you forgot that   again

User · Answer

In angular 7 got this fixed by adding these lines to  module ts file   import   CommonModule   from   angular common    imports   CommonModule

User · Answer

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

User · Answer

Another typo leading to the OP s error could be using in    lt div  ngFor  let talk in talks  gt    You should use of instead    lt div  ngFor  let talk of talks  gt

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

This Statement used in Angular2 Beta version       Hereafter use let instead of    let keyword is used to declare local variable

User · Answer

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

User · Answer

Use this   lt div  ngFor  let talk of talks gt        talk title         talk speaker       lt p gt   talk description     lt  div gt    You need to specify variable to iterate over an array of an object

User · Answer

I forgot to annotate my component with   Input   Doh    book-list component html  Offending code     lt app-book-item    ngFor  let book of book    async     book   book  gt    lt -- Can t bind to  book  since it isn t a known property of  app-book-item   lt  app-book-item gt    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

User · Answer

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

User · Answer

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

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

Examples related to angular

Examples related to typescript

Examples related to angular2-directives

Examples related to ngfor