title: angular2 testing: Can't bind to 'ngModel' since it isn't a known property of 'input'
body: <p>I am trying to test angular2 two-way binding for control <code>input</code>. Here is the error:</p>
  <pre><code>Can't bind to 'ngModel' since it isn't a known property of 'input'.
  </code></pre>
  <p>The app.component.html</p>
  <pre class="lang-html prettyprint-override"><code>&lt;input id=&quot;name&quot; type=&quot;text&quot; [(ngModel)]=&quot;name&quot; /&gt;
  &lt;div id=&quot;divName&quot;&gt;{{name}}&lt;/div&gt;
  </code></pre>
  <p>The app.component.ts</p>
  <pre class="lang-js prettyprint-override"><code>@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'  
  })
  export class AppComponent implements OnInit {
    name: string;    
  }
  </code></pre>
  <p>app.component.spec.ts</p>
  <pre class="lang-js prettyprint-override"><code>import { TestBed, async } from '@angular/core/testing';
  import { AppComponent } from './app.component';
  import { AppService } from './app.service';
  describe('App: Cli', () =&gt; {
    beforeEach(() =&gt; {
      TestBed.configureTestingModule({
        declarations: [
          AppComponent
        ],
        providers:[AppService]
      });
    });
  
    it('divName', async(() =&gt; {
      let fixture = TestBed.createComponent(AppComponent);
      let comp = fixture.componentInstance;
      comp.name = 'test';
      fixture.detectChanges();
  
      let compiled = fixture.debugElement.nativeElement;    
      expect(compiled.querySelector('divName').textContent).toContain('test');
    }));  
  });
  </code></pre>