Can't use ngFor on mdGridTile

[arekKalbarczyk]

Hi!
It seems that md-grid-tile does not recognize ngFor, resulting in template parse error.

angular version: 2.0.0
material: 2.0.0-alpha.8-2

My code:

<md-grid-list cols="6" rowHeight="fit">
  <md-grid-tile *ngFor="let campaignColumn of campaignListColumns" 
                [colspan]="1" 
                [rowspan]="1">
    {{ campaignColumn }}
  </md-grid-tile>
</md-grid-list>

campaignListColumns is just a plain array of strings.

error msg:

Can't bind to 'ngForOf' since it isn't a known property of 'md-grid-tile'.
1. If 'md-grid-tile' is an Angular component and it has 'ngForOf' input, then verify that it is part of this module.
2. If 'md-grid-tile' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schema' of this component to suppress this.

Property binding ngForOf not used by any directive on an embedded template. Make sure that the property name is spelled correctly and all directives are listed in the "directives" sectio

<md-grid-list cols="6" rowHeight="fit">
  [ERROR ->]<md-grid-tile *ngFor="let campaignColumn of campaignListColumns" [colspan]="1" [rowspan]="1">
    {{ "): CampaignsList@12:2
    at TemplateParser.parse (http://localhost:3000/vendor.bundle.js:20393:19)
    at RuntimeCompiler._compileTemplate (http://localhost:3000/vendor.bundle.js:18274:51)
    at http://localhost:3000/vendor.bundle.js:18197:83
    at Set.forEach (native)
    at compile (http://localhost:3000/vendor.bundle.js:18197:47)
    at ZoneDelegate.invoke (http://localhost:3000/polyfills.bundle.js:15090:28)
    at Zone.run (http://localhost:3000/polyfills.bundle.js:14983:43)
    at http://localhost:3000/polyfills.bundle.js:15349:57
    at ZoneDelegate.invokeTask (http://localhost:3000/polyfills.bundle.js:15123:37)
    at Zone.runTask (http://localhost:3000/polyfills.bundle.js:15023:47)
    at drainMicroTaskQueue (http://localhost:3000/polyfills.bundle.js:15255:35)

[cre8]

can you try to use colspan and rowspan instead of [colspan] and [rowspan], because you say it should read from the variable 1 that doesn't exists. Maybe this is the error

[arekKalbarczyk]

Didn't help, but thanks for trying :)
Btw. I think that the error is thrown before compiler even gets to other bindings

[arekKalbarczyk]

This error was caused by me wrongly importing BrowserModule into the module. Nothing related to AM2.
Excuse me.

[ruant]

@arekKalbarczyk
Sorry for bringing this old issue to life again, but I'm having an big issue with this and I'm not sure what's wrong.
How did you fix this?

[danielptm]

Yeah Im having an issue with this too.

[ruant]

For me it ended up being a webpack loader issue.
I was using html-loader, and the default settings for that is to lowercase everything.
That made *ngFor turn into *ngfor which doesn't work since it's case sensitive.
See webpack-contrib/html-loader#67 for more info.

[smallg]

add CommonModule into your component

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}