title: Angular2 data binding for custom reusable component
body: <p>I want to have a template consisting of a label and textbox. This template can be reused at different places in my page. to do that i have created a MyTextComponent. I want to know how to i bind different values to the components input.</p>
  
  <p>for example:</p>
  
  <p><strong>MyTextComponent</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component, Input} from 'angular2/core';
  @Component({
      selector: 'myText',
      template:`&lt;label&gt;{{someLabel}}&lt;/label&gt;
                   &lt;input id=myId type="text" [(ngModel)]=bindModelData&gt;
                   `
  })
  export class MyTextComponent {
      @Input() myId : string;
      @Input() bindModelData: any;
  }
  </code></pre>
  
  <p><strong>MyPageComponent</strong></p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component} from 'angular2/core';
  import {MyTextComponent} from './MyTextComponent.component'
  
  @Component({
      template:`&lt;myText myId="id1" bindModelData="myString1"&gt;&lt;/myText&gt;
                &lt;myText myId="id2" bindModelData="myString2"&gt;&lt;/myText&gt;
                `,
      directives:[MyTextComponent]
  })
  export class MyPageComponent{
      myString1: string;
      myString2: string;
  }
  </code></pre>
  
  <p>How do i bind MyTextComponent input's ngModel to MyPageComponent local variable?</p>
  
  <p><strong>Edit</strong>:
  Tried after adding @Output, but it didnt work :(
  the interpolation in the MyPageComponent is blank as well as the log is printing undefined. However the interpolation is working for the mytextComponent. Any ideas</p>
  
  <pre class="lang-ts prettyprint-override"><code>import {Component} from 'angular2/core';
  import {MyTextComponent} from './myText.component'
  
  @Component({
      template:`&lt;myText myId="id1" [(bindModelData)]="myString1"&gt;&lt;/myText&gt;
                &lt;myText myId="id2" [(bindModelData)]="myString2"&gt;&lt;/myText&gt;
                {{myString1}}
                {{myString2}}
  
                &lt;button (click)="clicked()"&gt;Click Me&lt;/button&gt;
                `,
      directives:[MyTextComponent],
      selector:'myPage'
  })
  export class MyPageComponent{
      myString1: string;
      myString2: string;
  
      clicked(){
          console.log(this.myString1+'--'+this.myString2);
      }
  }
  
  
  import {Component,Input,Output,EventEmitter} from 'angular2/core';
  @Component({
      selector: 'myText',
      template:`&lt;label&gt;{{someLabel}}&lt;/label&gt;
                   &lt;input id=myId type="text" [ngModel]=bindModelData (ngModelChange)="updateData($event)"&gt;
                   modeldata - {{bindModelData}}
                   `
  })
  export class MyTextComponent {
      @Input() myId : string;
      @Input() bindModelData: any;
      @Output() bindModelDataChanged: any = new EventEmitter();
      updateData(event) {
         console.log('some random text');
        this.bindModelData = event;
        this.bindModelDataChanged.emit(event);
      }
  }
  </code></pre>