/ Quick Fix

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' (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">{{ d.name }}</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">{{ d.name }}</li>

Hopefully going through these three steps resolves the issue.

Tamas Piros

Tamas Piros

Tamas is a full stack web developer turned technical trainer who has a decade of experience working with prestigious organisations and has delivered training classes all over the world.

Read More