5

Can't bind to 'ngforOf' since it isn't a known native property

    <h4>Colors bad boys</h4>
    <ul><li [ERROR ->]*ngfor="#color of colors">
        <span>{{color.color | upperCase}}</span>
      </li>

Trying to load the template via TemplateParser or RuntimeMetadataResolver and inject the overwtitten method in angular2 bootstrap e.g. for RuntimeMetadataResolver

The template loads its content correctly, but parsing fails with the error

Can't bind to 'ngforOf' since it isn't a known native property

Angel Angel
  • 19,670
  • 29
  • 79
  • 105
Vladimir Ivanov
  • 51
  • 1
  • 1
  • 2
  • sample code for RuntimeMetadataResolver: https://gist.github.com/vladimir-ivanov/a9800ca6b39c677a1dbd – Vladimir Ivanov Feb 21 '16 at 00:21
  • 2
    I do not understand your question, maybe you should use, *ngFor no *ngfor https://angular.io/docs/ts/latest/api/common/NgFor-directive.html#!#syntax – Angel Angel Feb 21 '16 at 01:00

1 Answers1

18

Pay attention to the casing, it is *ngFor (capital F), not *ngfor or ng-for.

To fix your example, use:

...
<ul><li *ngFor="#color of colors">
...

Notice, again, it is *ngFor, not *ngfor.

Two plunkers showing the problem and correction:

Here's a plunker with that same error you have (look at app/app.component.ts and the console):

Can't bind to 'ngforOf' since it isn't a known native property

And then the exact same code, fixed, in this other plunker (just changed the F of *ngFor).

Lastest Angular versions

In recent versions of Angular we have @NgModules which require some additional configuration.

To get *ngFor, in your app module you have to import BrowserModule:

import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  imports:      [ BrowserModule ],
  // ...
})
export class AppModule { }

In other modules, import CommonModule:

import { CommonModule } from '@angular/common';

@NgModule({
  imports:      [ CommonModule ],
  // ...
})
export class OtherModule { }
acdcjunior
  • 132,397
  • 37
  • 331
  • 304
  • ok, finally not a problem with angular itself @acdcjunior - thank you for highlighting it - seems that attributes inside – Vladimir Ivanov Feb 21 '16 at 12:58
  • Strange. This conversion to lowercase by the browser shouldn't happen. Anyway, I'm not 100%, are you still getting the problem or was it fixed? – acdcjunior Feb 21 '16 at 17:21
  • seems to be the default behaviour of the browser - all tags and attributes are treated as case insensitive (lowercase). To solve the templateCache problem in angular 2 will require creating another template cache class - with simple put and get methods (like $templateCache in angular1) and read it from there instead within RuntimeMetadataResolver - then injecting the modified one to load templateUrl strings (working on it now). So yes, the issue as far as angular2 is concerned is "fixed/clear". Thank you for your help – Vladimir Ivanov Feb 21 '16 at 17:41