title: ngModel not working in Angular4
body: <p>I am learning Angular 4 from the <a href="https://angular.io" rel="noreferrer">official site</a> and I came to the part with <a href="https://angular.io/tutorial/toh-pt1#import-the-formsmodule" rel="noreferrer">2-way data binding through <strong>ngModel</strong></a>. However, my app stops working as soon as I add [(ngModel)] to my component template, even though the FormsModule is imported in the module.ts file. The component does not load.<br>
  I am using Visual Studio Code.<br>
  This is my app.component.ts</p>
  
  <pre><code>import { Component } from '@angular/core';
  
      export class Hero {
        id: number;
        name: string;
      }
  
  
  
      @Component({
        selector: 'app',
        template: `
        &lt;h1&gt;{{ title }}&lt;/h1&gt;
        &lt;h2&gt;{{hero.name}} details!&lt;/h2&gt;
        &lt;div&gt;&lt;label&gt;Id:&lt;/label&gt; {{hero.id}} &lt;/div&gt;
        &lt;div&gt;name:&lt;input [(ngModel)]="hero.name" type="text"&gt;&lt;/div&gt;
        `,
        styles:[`
          .selected{
            transition: padding 0.3s;
            color: mediumseagreen;
          }
        `]
      })
  
      export class AppComponent {
        title = 'Tour Of Heroes';
  
       hero:Hero = {
         id:1,
         name:"Mr. Invisible"
       };
      }  
  </code></pre>
  
  <p>This is app.module.ts  </p>
  
  <pre><code>import { FormsModule } from '@angular/forms';
  import { BrowserModule } from '@angular/platform-browser';
  import { NgModule } from '@angular/core';
  
      import { AppComponent, Hero } from './app.component';
  
      @NgModule({
        declarations: [
          AppComponent,
          FormsModule
        ],
        imports: [
          BrowserModule
        ],
        providers: [],
        bootstrap: [AppComponent]
      })
      export class AppModule { } 
  </code></pre>
  
  <p>The AppComponent is not loaded and just shows </p>
  
  <p>Loading...</p>