title: Angular 4: Can't bind to 'ngModel'
body: <p>I have just started learning. My <code>app.components.ts</code> file looks like this:</p>
  
  <pre><code>import { Component, NgModule } from '@angular/core';
  import { FormsModule } from '@angular/forms';
  
  @NgModule({
    imports:   [FormsModule ],
    //...
  })
  
  @Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    // title = 'app';
    name = '';
  }
  </code></pre>
  
  <p>and my <code>app.component.html</code> is this:</p>
  
  <pre><code>  &lt;input type="text" [(ngModel)]="name"&gt;
    &lt;p&gt;{{ name }}&lt;/p&gt;
  </code></pre>
  
  <p>Javascript console is giving me following error:</p>
  
  <pre><code>compiler.es5.js:1689 Uncaught Error: Template parse errors:
  Can't bind to 'ngModel' since it isn't a known property of 'input'. ("et="_blank" href="http://angularjs.blogspot.ca/"&gt;Angular blog&lt;/a&gt;&lt;/h2&gt;
    &lt;/li&gt;
    &lt;input type="text" [ERROR -&gt;][(ngModel)]="name"&gt;
    &lt;p&gt;{{ name }}&lt;/p&gt;
  &lt;/ul&gt;
  "): ng:///AppModule/AppComponent.html@18:21
      at syntaxError (http://localhost:4200/vendor.bundle.js:18052:34)
      at TemplateParser.webpackJsonp.../../../compiler/@angular/compiler.es5.js.TemplateParser.parse (http://localhost:4200/vendor.bundle.js:29164:19)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileTemplate (http://localhost:4200/vendor.bundle.js:43209:39)
      at http://localhost:4200/vendor.bundle.js:43129:62
      at Set.forEach (native)
      at JitCompiler.webpackJsonp.../../../compiler/@angular/compiler.es5.js.JitCompiler._compileComponents (http://localhost:4200/vendor.bundle.js:43129:19)
  </code></pre>
  
  <p>...</p>
  
  <p><a href="https://stackoverflow.com/questions/43994919/why-ngmodel-is-not-working">This</a> page recommends adding <code>FormsModule</code> but as you can see it's not working.</p>