Mark Rajcok
Mark Rajcok

Reputation: 364677

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

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">

Upvotes: 489

Views: 223952

Answers (12)

Mark Rajcok
Mark Rajcok

Reputation: 364677

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>

Upvotes: 969

Peter Nixey
Peter Nixey

Reputation: 16565

To add one more gotcha, I naively discovered that if you don't use a let statement to assign the index of the loop you also get the same error:

<span *ngFor="let button of buttons; i: index; trackBy: trackBy">
...
</span>

also throws the same error. The following version fixes it

<span *ngFor="let button of buttons; let i = index; trackBy: trackBy">
...
</span>

Upvotes: 0

shyam yadav
shyam yadav

Reputation: 275

Simply changing "in" to "of" solved my same problem.

Chnage <div *ngFor="let talk in talks">

to     <div *ngFor="let talk of talks">

Upvotes: 1

Rajitha Bhanuka
Rajitha Bhanuka

Reputation: 842

Basically, if you create a popup using a new class, so at that time you have to add that class under the

declarations: []

In base.module.ts or app.module.ts

My Example code

##########################MY COMPONENT##################################

@Component({
  selector: 'app-modal-content',
  templateUrl: './order-details.html',
  encapsulation: ViewEncapsulation.None,
  styles: []
})

export class NgbdModalContent {
  @Input() orderDetails: any;
  private orderId;
  private customer;
  private orderDate;
  private shipDate;
  private totalAmount;
  private salesTax;
  private shippingCost;
  private transactionStatus;
  private isPaid;
  private isMailSent;
  private paymentDate;

  // private orderDetails;

  constructor(public activeModal: NgbActiveModal) {
  }
}

###########################BASE MODULE#################################

@NgModule({
    imports: [
        CommonModule,
        FormsModule
    ],
  declarations: [
    NavbarsComponent,
    NgbdModalContent,
  ]
})
export class BaseModule { }

Upvotes: 0

Naeem Bashir
Naeem Bashir

Reputation: 2017

use of instead of in. You can use KeyValue Pipe . You can easily iterate over an object:

<div *ngFor="let items of allObject | keyvalue">
  {{items.key}}:{{items.value}}
</div>

Upvotes: 15

Bal Krishna Jha
Bal Krishna Jha

Reputation: 7206

There is an alternative if you want to use of and not switch to in. You can use KeyValuePipe introduced in 6.1. You can easily iterate over an object:

<div *ngFor="let item of object | keyvalue">
  {{item.key}}:{{item.value}}
</div>

Upvotes: 25

Rohitesh
Rohitesh

Reputation: 1624

Try to import import { CommonModule } from '@angular/common'; in angular final as *ngFor ,*ngIf all are present in CommonModule

Upvotes: 13

Tomino
Tomino

Reputation: 6249

My problem was, that Visual Studio somehow automatically lowercased *ngFor to *ngfor on copy&paste.

Upvotes: 7

mamsoudi
mamsoudi

Reputation: 4059

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.

Upvotes: 354

user9838309
user9838309

Reputation: 1

Q:Can't bind to 'pSelectableRow' since it isn't a known property of 'tr'.

A:you need to configure the primeng tabulemodule in ngmodule

Upvotes: -6

Unkas
Unkas

Reputation: 3710

my solution was - just remove '*' character from the expression ^__^

<div ngFor="let talk in talks">

Upvotes: -20

Eran Shabi
Eran Shabi

Reputation: 14979

In my case, WebStrom auto-complete inserted lowercased *ngfor, even when it looks like you choose the right camel cased one (*ngFor).

Upvotes: 11

Related Questions