Angular 2 - Common directives like ngIf, ngFor not working

Question

I just started learning Angular 2 and I'm stuck on making common directives to work. I'm on Angular version 2.1.1 and I'm receiving the error Can't bind to 'ngforOf' since it isn't a known property of 'li'. Same goes to *ngIf and other directives.

Some of the most relevant tips I've read from similar questions here on making it work:

1. Make sure to use the correct spelling and casing of the directives in the view, like so ng-if should be *ngIf, etc.
1. Import BrowserModule in the root module and CommonModule in other modules where you want to use common directives. Link

So far, here are parts of my code implementing those proposed fixes:

approot.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HttpModule, RequestOptions } from '@angular/http';
import { AuthRequestOptions } from '../services/auth.request.options';

import { AppComponent } from '../approot/approot.component';
import { AppRoutingModule } from './approot.routing.module';

import { DashboardModule } from '../dashboard/dashboard.module';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    DashboardModule
  ],
  declarations: [
    AppComponent
  ],
  providers: [
    {provide: RequestOptions, useClass: AuthRequestOptions}
  ],
  bootstrap: [ AppComponent ]
})

export class AppModule { }

dashboard.module.ts

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

import { DashboardRoutingModule } from './dashboard.routing.module';
import { DashboardComponent } from './dashboard.component';
import { DashboardHomeComponent } from './dashboard-home.component';

@NgModule({
  imports: [
    CommonModule,
    DashboardRoutingModule,
  ],
  declarations: [
    DashboardComponent,
    DashboardHomeComponent
  ],
})

export class DashboardModule { }

dashboard.component.ts (where I want to use *ngFor)

import {Component} from "@angular/core";
import {ListService} from "../services/list.service";
import {ListModel} from "../models/list.model";

@Component({
  templateUrl: '/views/dashboard/views/dashboard.html',
  providers: [
    ListService
  ],
  styleUrls: ['../css/dashboard/styles/dashboard.css']
})

export class DashboardComponent {

  lists: Array<ListModel>;

  constructor (private listService: ListService) {
    this.lists = [];
  }

  ngOnInit () {
    console.log(this.lists);
    this.listService.getLists().subscribe(
      (data) => {
        this.lists = data;
        console.log(this.lists);
      }
    );
  }
}

EDIT dashboard.html

<div class="row">
  <div class="col-sm-3 col-md-2 sidebar">
    <ul class="nav nav-sidebar">
      <li class="active">
        <a>My Lists</a>
      </li>

      <li *ngFor="let list of lists">
        <a href="#">{{list.name}}</a>
      </li>

    </ul>
  </div>
  <div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
    <router-outlet></router-outlet>
  </div>
</div>

I also tried importing BrowserModule instead of CommonModule in dashboard.module.ts but still got no luck.

I learned that previous angular2 beta versions has directive attribute in the @Component() and directives should be declared there so that they can be parsed. This is already deprecated in the current version of angular and I wonder if this has something to do with this error, angular not recognizing common directives.

Any help would be very much appreciated.

I guess it should be `*ngFor=` instead of `*ngfor=`. It's case-sensitive — yurzui, Oct 23 '16 at 07:43
Added dashboard.html @SefaÜmitOray

My Lists

{{list.name}} — papar, Oct 23 '16 at 07:48
Your error is `Can't bind to 'ngforOf'` If you use `*ngFor` then it will be `ngForOf` — yurzui, Oct 23 '16 at 07:50
@yurzui - I added dashboard.html in the question/post. You can see I'm using `*ngFor=`. But the error says `Can't bind to 'ngforOf'`, don't know why. — papar, Oct 23 '16 at 07:52

score 1 · Answer 1 · answered Oct 23 '16 at 08:38

Ok, My mistake. Sorry for bothering guys. I'm using gulp-htmlmin plugin which modified the contents of my templates. I just needed to add {caseSensitive: true} to gulp-htmlmin options to allow for custom element attributes. Thanks everyone for the effort.

Angular 2 - Common directives like ngIf, ngFor not working

1 Answers1