title: Bidirectional data binding on a component input property
body: <p>I am trying to make something work on angular2 and I am unable to find something about this behavior.</p>
  
  <p>I have an application that implements a custom component like this one :</p>
  
  <pre><code>import {Component,Input} from 'angular2/core'
      @Component({
        selector:'my-comp',
        template:`&lt;input type="text" style="text-align:center; [(ngModel)]="inputText"&gt; &lt;p&gt;{{inputText}}&lt;/p&gt;`
      })
  
      export class MyComp{
        @Input() inputText : string;
      }
  </code></pre>
  
  <p>And I am trying to do a bidirectional databinding on my <code>inputText</code> variable from my component like this:</p>
  
  <pre><code>&lt;my-comp [(inputText)]="testString"&gt;&lt;/my-comp&gt;
  </code></pre>
  
  <p>Where the <code>testString</code> is a variable defined in the <code>MyApp.ts</code> which contains a string. I want my <code>testString</code> variable to be modified when my <code>inputText</code> is modified by the user.</p>
  
  <p>Here is a Plunker with a simple sample code : <a href="https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview" rel="noreferrer">https://plnkr.co/edit/zQiCQ3hxSSjCmhWJMJph?p=preview</a></p>
  
  <p>Is there a way to make this works simply ? Do I have to implements an Angular2 class on my custom components and overload functions in order to make this works like an <code>ngModel</code> ? Do i necessarily have to create a <code>inputTextChanged</code> variable of <code>EventEmitter</code> type that emit my data when it's changed and do something like this : </p>
  
  <pre><code>&lt;my-comp [inputText]="testString" (inputTextChanged)="testString = $event;"&gt;&lt;/my-comp&gt;
  </code></pre>
  
  <p>Thank you in advance.</p>