489

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">
Improve this question
2
  • 15
    try to change this <div *ngFor="let talk in talks"> to this <div *ngFor="let talk of talks"> note: "in" to "of" Commented Sep 16, 2019 at 14:51
  • 1
    I guess you are from C#/Java background , I did the same mistake of using in instead of Of Commented Jan 23, 2020 at 9:32

12 Answers 12

Reset to default
969

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>
Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

And yes, remember the # before the talk variable (as your said: "hope it helps someone else down the road... probably me!")
@Nobita, yes, that one has tripped me up just as often. I wrote a Q&A for that one too: stackoverflow.com/questions/34012291/…
so stinking obvious when you realise... I find it really counter-intuitive, so used to for-in style. I would up vote both your Q&A posts more if I could, thanks
Thanks Mark. It's not the greatest error message - like WTF is "ngForIn" supposed to mean!? But in retrospect, duh! I wrestled with this for like 20 minutes before I found your Q&A.
I agree that the answer should have both. But I further updated the answer to make it clearer that post beta.17 the syntax is different. (I stopped short of swapping around it so the latest is first). Instead I just put a small note in. At first glance, a newcomer may not realise the latest syntax. Its a minor change but makes a big difference
|
354

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.

Improve this answer

3 Comments

As an aside - does anyone know the reason behind the use of "of", "in" seems a more natural choice here.
@mamsoudi @Morvael The difference is that for..in iterates the object's keys/properties while for...of iterates the object's values. for(prop in foo) {} is the same as for(prop of Object.keys(foo)) {}. This is a new language feature of ECMA Script 2015 / ES6. So this is only remotely an Angular issue.
this is what happens when you have been coding in C# for years and then move on to angular
25

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>
Improve this answer

Comments

15

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>
Improve this answer

Comments

13

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

Improve this answer

1 Comment

I'd think this answer would be the more common reason nowadays for getting the error in OP title.
11

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

Improve this answer

Comments

7

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

Improve this answer

Comments

1

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

Chnage <div *ngFor="let talk in talks"> to <div *ngFor="let talk of talks">
Improve this answer

Comments

0

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 { }
Improve this answer

Comments

0

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>
Improve this answer

Comments

-6

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

Improve this answer

Comments

-20

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

<div ngFor="let talk in talks">
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.