7

I started using Angular2 (final version) and i'm having some problems with *ngFor.

I've built the following component tree: main -> dashboard -> alerts

Unhandled Promise rejection: Template parse errors: Can't bind to 'ngForOf' since it isn't a known property of 'div'.

("<div class="item" [ERROR ->] *ngFor="let alert of alerts"> "): DashboardAlertsComponent@5:20 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" section.

It works ok but when i'm tried adding *ngFor loop in alerts component I got the following error:

DashboardAlertsComponent:

import {Component, OnInit} from "@angular/core";
import {Alert} from "../../shared/models/alert.model";

@Component({
  selector: 'dashboard-alerts',
  templateUrl: './alerts.component.html'
})
export class DashboardAlertsComponent implements OnInit {

  alerts:Alert[] = new Array<Alert>();
  constructor() {
    this.alerts.push(new Alert('1', 'high', 'My alert1', '12/11/2016 4:50 PM'));
    this.alerts.push(new Alert('2', 'low', 'My alert2', '11/11/2016 9:50 PM'));
    this.alerts.push(new Alert('3', 'medium', 'My alert3', '10/11/2016 2:50 PM'));
  }

  ngOnInit() {
  }
}

alerts.component.html

<div class="item" *ngFor="let alert of alerts">
    <span class="priority {{ alert }}"></span>
    <span class="title">{{ alert }}</span>
    <span class="time">3:40 PM</span>
    <a href="#" class="more-actions"><span>Actions</span></a>
</div>

DashboardModule

@NgModule({
  declarations: [
    DashboardAlertsComponent
  ],
  providers: [],
  directives: [],
})
export class DashboardModule {
}

AppModule

@NgModule({
  imports: [
    BrowserModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
}

P.S I read many suggested solutions for this problem but none of them solved this

John Smith
  • 203
  • 1
  • 3
  • 11

1 Answers1

12

You should import CommonModule in the main module, and BrowserModule in the other modules (if you are working with multiple modules). I got the same problem and it works fine for me

Mourad Idrissi
  • 3,455
  • 5
  • 17
  • 29
  • you sure about this? i've done the opposite (BrowserModule in main module and CommonModule in the child module) and it worked, what is the correct way? – John Smith Nov 22 '16 at 09:46
  • take a look here : https://angular.io/docs/ts/latest/cookbook/ngmodule-faq.html#!#q-browser-vs-common-module – Mourad Idrissi Nov 22 '16 at 09:52
  • Yes you are right, I exchanged them. But I think it's the source of the problem :) – Mourad Idrissi Nov 22 '16 at 09:52
  • BrowserModule for child component was my case – Toolkit Dec 21 '16 at 11:37
  • I believe this is wrong or outdated. The current contents of angular 2 docs ( the link provided above ) state that `BrowserModule` should only be imported in root module and `CommonModule` in all the rest. – Alex Aug 03 '17 at 11:25
  • 1
    Actually just opposite of it. https://hassantariqblog.wordpress.com/2016/10/28/angular2-error-cant-bind-to-ngforof-since-it-isnt-a-known-property/ – Aman Dec 04 '17 at 08:59