Angular exception: Can't bind to 'ngForIn' since it isn't a known native property

Question

What am I doing wrong?

import {bootstrap, Component} from 'angular2/angular2'  @Component({   selector: 'conf-talks',   template: `<div *ngFor="let talk in talks">      {{talk.title}} by {{talk.speaker}}      <p>{{talk.description}}    </div>` }) class ConfTalks {   talks = [ {title: 't1', speaker: 'Brian', description: 'talk 1'},             {title: 't2', speaker: 'Julie', description: 'talk 2'}]; } @Component({   selector: 'my-app',   directives: [ConfTalks],   template: '<conf-talks></conf-talks>' }) class App {} bootstrap(App, []) 

The error is

EXCEPTION: Template parse errors: Can't bind to 'ngForIn' since it isn't a known native property ("<div [ERROR ->]*ngFor="let talk in talks"> 

Answer 1

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>