Resolving 'Can't bind to 'ngFor' since it isn't a known property of 'element'' error in Angular

The “can’t bind to ngFor since it’s not a known property of ‘element’” error (where “element” is something like li) pops up constantly in Angular apps. Here’s how to fix it.

Example

Say we’ve got a service returning data to our component:

// ...
private data;

ngOnInit() {
    this.propertyService.listAll()
    .subscribe(data => this.data = data);
  }
// ...

We want to iterate through that data and print values in the view:

<h2>Data</h2>
<ul>
  <li *ngFor="d of data">{{ d.name }}</li>
</ul>

And there it is in the console: Can't bind to 'ngFor' since it isn't a known property of 'li'.

Fixing the issue

Three things to check.

First, make sure the syntax and capitalisation are correct. It needs to be *ngFor.

Second, use value of values, not value in values. That single word swap trips people up all the time.

Third, include the let keyword in the *ngFor microsyntax. The corrected version looks like this:

<li *ngFor="let d of data">{{ d.name }}</li>

Work through those three checks and the error should disappear.