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

This post is 4 years old. (Or older!) Code samples may not work, screenshots may be missing and links could be broken. Although some of the content may be relevant please take it with a pinch of salt.

The can't bind to ngFor since it's not a known property of 'element' (replace element with an actual element such as li) is an error that pops up frequently in Angular applications. In this article we'll see how to fix it.

Example

Consider the following example where we have some service returning data to us in the component:

// ...
private data;

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

Then we'd simply like to iterate through the dataset and print out a value in the component's view:

<h2>Data</h2>
<ul>
  <li *ngFor="d of data"></li>
</ul>

And at this point we see an error showing up in the browser's console: Can't bind to 'ngFor' since it isn't a known property of 'li'.

Fixing the issue

There are a few things that we need to check in order to fix this problem.

The first one is to make sure that we have the right syntax and the right capitalisation of letters when using 'ngFor'. The correct syntax is *ngFor.

Second, we need to make sure that we are using `value of values' and not 'value in values'.

Last but not least we need to make sure that we use the let keyword in the *ngFor microsyntax, so the correct way that the above example should look like is this:

<li *ngFor="let d of data"></li>

Hopefully going through these three steps resolves the issue.