"Can't bind to 'ngFor' since it isn't a known property"

This is such a beginners problem, you would think.. But today, after developing angular application for more than five years now, I spent my 10 valuable minutes figuring out this issue. And, thus, this blogpost...

So I got this error on my developer tools console, and the first thing that came to my mind was I am missing some core module import in my module.ts file. So I checked the imports section of my module.ts file. Everything seemed correct. And so the confusion increased.

After developing various web apps in the framework for five years, you would expect that you know the syntax of the framework. Well, not apparantly, in the hurry, I made two mistakes in the syntax, first I forgot to use "let". My syntax was -

<tr *ngFor="car in cars"><td>.....</td></tr>

Second mistake was using "in" instead of "of". Correct syntax should be -

<tr *ngFor="let car of cars"><td>.....</td></tr>

Yes I made a syntactical mistake, but the error message didn't help me either. ngFor is not a known property would mean for whatever reason, ngFor cannot be recognized in the application. However, the real problem was that ngFor was recognised but the syntax of ngFor was wrong. Anyway, let's hope Angular team improves their logging in future updates.

Until then, happy coding :)