title: Angular2 (final version) *ngFor in component: Can't bind to 'ngForOf' since it isn't a known property of 'div'
body: <p>I started using Angular2 (final version) and i'm having some problems with *ngFor.</p>
  
  <p>I've built the following component tree:
  main -> dashboard -> alerts</p>
  
  <blockquote>
    <p>Unhandled Promise rejection: Template parse errors: Can't bind to
    'ngForOf' since it isn't a known property of 'div'. </p>
    
    <p>("&lt;div class="item" [ERROR ->]  *ngFor="let alert of alerts">
        
        "): DashboardAlertsComponent@5:20 Property binding ngForOf not used by any directive on an embedded template.</p>
    
    <p>Make sure that the property name is spelled correctly and all
    directives are listed in the "directives" section.</p>
  </blockquote>
  
  <p>It works ok but when i'm tried adding *ngFor loop in alerts component I got the following error:</p>
  
  <p><strong>DashboardAlertsComponent</strong>:</p>
  
  <pre><code>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&lt;Alert&gt;();
    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() {
    }
  }
  </code></pre>
  
  <p><strong>alerts.component.html</strong></p>
  
  <pre><code>&lt;div class="item" *ngFor="let alert of alerts"&gt;
      &lt;span class="priority {{ alert }}"&gt;&lt;/span&gt;
      &lt;span class="title"&gt;{{ alert }}&lt;/span&gt;
      &lt;span class="time"&gt;3:40 PM&lt;/span&gt;
      &lt;a href="#" class="more-actions"&gt;&lt;span&gt;Actions&lt;/span&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>DashboardModule</strong></p>
  
  <pre><code>@NgModule({
    declarations: [
      DashboardAlertsComponent
    ],
    providers: [],
    directives: [],
  })
  export class DashboardModule {
  }
  </code></pre>
  
  <p><strong>AppModule</strong></p>
  
  <pre><code>@NgModule({
    imports: [
      BrowserModule,
      DashboardModule
    ],
    declarations: [
      AppComponent
    ],
    bootstrap: [AppComponent]
  })
  export class AppModule {
  }
  </code></pre>
  
  <p>P.S I read many suggested solutions for this problem but none of them solved this</p>