title: angular 4 : Can't bind to 'ngForFor' since it isn't a known property of 'li'
body: <p>I've just started learning angular 4. This is a simple code that I'm trying to implement in Visual Studio Code, but keep getting this error.</p>
  
  <pre><code>Uncaught Error: Template parse errors:
  Can't bind to 'ngForFor' since it isn't a known property of 'li'. ("
  &lt;/ul&gt;
  &lt;ul&gt;
   &lt;li [ERROR -&gt;]*ngFor="let hobby for hobbies"&gt;{{hobby}}&lt;/li&gt;
  &lt;/ul&gt;"): ng:///AppModule/UserComponent.html@6:6
  Property binding ngForFor 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 "@NgModule.declarations".("
  &lt;/ul&gt;
  &lt;ul&gt;
  [ERROR -&gt;]&lt;li *ngFor="let hobby for hobbies"&gt;{{hobby}}&lt;/li&gt;
  &lt;/ul&gt;"): ng:///AppModule/UserComponent.html@6:2
  </code></pre>
  
  <p>I tried previous solutions of adding the CommonModule to the app.module file. But it hasn't solved  the issue.I cannot figure out what is wrong.</p>
  
  <p>app.component.ts:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
  
  }
  </code></pre>
  
  <p>app.module.ts:</p>
  
  <pre><code>import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
  
  import { AppComponent } from './app.component';
  import { UserComponent } from './components/user/user.component';
  import {CommonModule} from '@angular/common';
  
  @NgModule({
    declarations: [
      AppComponent,
      UserComponent
    ],
    imports: [
      BrowserModule,CommonModule
    ],
    providers: [],
    bootstrap: [AppComponent]
  })
  export class AppModule { }
  </code></pre>
  
  <p>user.component.ts:</p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  
  
  @Component({
    selector: 'app-user',
    templateUrl: './user.component.html',
    styleUrls: ['./user.component.css']
  })
  export class UserComponent implements OnInit {
    name:string;
    age:number;
    address: Address;
    hobbies:string[];
  
  
    constructor() { 
      console.log('constructor ran ...');
    }
  
    ngOnInit() {
    console.log('ngOnInit ran ...');
    this.name='Raul';
    this.age=22;
    this.address= {
      street:'abc',
      city:'xyz',
      country: 'jkl'
    }
    this.hobbies=['reading','playing','swimming'];
    }
  
  }
  
  interface Address{
    street:string,
    city:string,
    country:string
  
  }
  </code></pre>
  
  <p>user.component.html:</p>
  
  <pre><code>&lt;h1&gt;{{name}}&lt;/h1&gt;
  &lt;ul&gt;
    &lt;li&gt;Age:{{age}}&lt;/li&gt;
    &lt;li&gt;Address:{{address.street}}, {{address.city}},{{address.country}}&lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul&gt;
    &lt;li *ngFor="let hobby for hobbies"&gt;{{hobby}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>