Angular exception: Can't bind to 'ngForIn' since it isn't a known native property
Since this is at least the third time I've wasted more than 5 min on this problem I figured I'd post the Q & A. I hope it helps someone else down the road... probably me!
I typed in
instead of of
in the ngFor expression.
Befor 2-beta.17, it should be:
<div *ngFor="#talk of talks">
As of beta.17, use the let
syntax instead of #
. See the UPDATE further down for more info.
Note that the ngFor syntax "desugars" into the following:
<template ngFor #talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in
instead, it turns into
<template ngFor #talk [ngForIn]="talks">
<div>...</div>
</template>
Since ngForIn
isn't an attribute directive with an input property of the same name (like ngIf
), Angular then tries to see if it is a (known native) property of the template
element, and it isn't, hence the error.
UPDATE - as of 2-beta.17, use the let
syntax instead of #
. This updates to the following:
<div *ngFor="let talk of talks">
Note that the ngFor syntax "desugars" into the following:
<template ngFor let-talk [ngForOf]="talks">
<div>...</div>
</template>
If we use in
instead, it turns into
<template ngFor let-talk [ngForIn]="talks">
<div>...</div>
</template>
TL;DR;
Use let...of instead of let...in !!
If you're new to Angular (>2.x) and possibly migrating from Angular1.x, most likely you're confusing in
with of
. As andreas has mentioned in the comments below for ... of
iterates over values
of an object while for ... in
iterates over properties
in an object. This is a new feature introduced in ES2015.
Simply replace:
<!-- Iterate over properties (incorrect in our case here) -->
<div *ngFor="let talk in talks">
with
<!-- Iterate over values (correct way to use here) -->
<div *ngFor="let talk of talks">
So, you must replace in
with of
inside ngFor
directive to get the values.
Try to import import { CommonModule } from '@angular/common';
in angular final as *ngFor
,*ngIf
all are present in CommonModule