title: Angular 2 Component with ngModel doesnt work
body: <p>Iam new in Angular 2,before posting I tried to search for a solution over the internet but I couldnt get solution.i will be thankful if some one will help me</p>
  
  <p>my codes below works without ngModel </p>
  
  <p>user.component</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
  selector: 'user',
  template: `&lt;h3&gt;Welcome {{name}}&lt;/h3&gt;
   &lt;p&gt;EMAIL: {{email}}&lt;/p&gt;
   &lt;div *ngIf="showHobbies"&gt; 
   &lt;p&gt;HOBBIES:&lt;/p&gt;  
      &lt;ul&gt;
        &lt;li *ngFor="let hobby of hobbies"&gt;
           {{hobby}}
        &lt;/li&gt;
       &lt;/ul&gt;
   &lt;/div&gt;
  `,
  })
  
  export class UsersComponent  {
  
  username:string;
  private name:string;
  private email:string;
  private hobbies:string[];
  private showHobbies:boolean;
  
  constructor(){
      this.username="";
      this.showHobbies=false;
      this.name="My name";
      this.email="My Email";
      this.hobbies=['swimming','watching movie','playing football'];
  }
  
  toggleHobbies(){
       if(this.showHobbies==true){
           this.showHobbies = false;
       }
       else {
           this.showHobbies = true;
       }
  }
  
  }
  </code></pre>
  
  <p>app.module look like this</p>
  
  <pre><code>import { NgModule }      from '@angular/core';
  import { FormsModule } from '@angular/forms';
  import { BrowserModule } from '@angular/platform-browser';
  import { AppComponent }  from './app.component';
  import { UsersComponent  }  from './components/users.component';
  
  @NgModule({
    imports:      [ BrowserModule,FormsModule],
    declarations: [ AppComponent,UsersComponent],
    bootstrap:    [ AppComponent ]
  })
  
  export class AppModule { }
  </code></pre>
  
  <p>my app.component look like this</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `&lt;user&gt;&lt;/user&gt;`,
  })
  
  export class AppComponent  { }
  </code></pre>
  
  <p>The above code stop to work when am adding form with ngModule for 2way binding in user.component</p>
  
  <pre><code>@Component({
      selector: 'user',
      template: `&lt;h3&gt;Welcome {{name}}&lt;/h3&gt;
       &lt;p&gt;EMAIL: {{email}}&lt;/p&gt;
       &lt;p&gt;TEL: {{telephone}}&lt;/p&gt;
       &lt;button (click)="toggleHobbies()"&gt;{{ showHobbies ? 'Hide hobbies' : 'Show hobbies'}}&lt;/button&gt;
  
      &lt;div *ngIf="showHobbies"&gt; 
       &lt;p&gt;HOBBIES:&lt;/p&gt;  
          &lt;ul&gt;
             &lt;li *ngFor="let hobby of hobbies"&gt;
                {{hobby}}
             &lt;/li&gt;
          &lt;/ul&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p>when am adding the form below other codes stops to works</p>
  
  <pre><code>&lt;form&gt;
     &lt;label&gt;Name&lt;/label&gt; &lt;br/&gt;
     &lt;input type="text" [(ngModel)]="username" /&gt;
     &lt;p&gt;Hello {{username}} &lt;/p&gt;
  &lt;/form&gt;
  `,
  </code></pre>
  
  <p>})</p>