title: 2-Way Binding a Property of a Component in Angular 2
body: <p>I am trying to make a directive, where one set of Input/Output fields are linked to be like a 2 way binding as per with [(ngModel)].</p>
  
  <p>Here's a simplified version of what I'm trying to do:</p>
  
  <pre><code>@Component({
      selector: "template-for-inputbox",
      template: 
      `
       &lt;div&gt;&lt;label&gt;{{Label}}&lt;/label&gt;
           &lt;input [(ngModel)]="Value"/&gt;
       &lt;/div&gt;
      `
  })
  export class TemplateForInputBoxDirective{
      @Input() DataValue:any;
      @Output() DataChanged:EventEmitter&lt;any&gt; = new EventEmitter();
      get Value(){
          return this.Data;
      }
      set Value(tValue){
           //Check some things about the new value then...
           this.DataChanged.emit(tValue);
      }
  }
  </code></pre>
  
  <p>While reading <a href="http://victorsavkin.com/post/119943127151/angular-2-template-syntax" rel="nofollow">http://victorsavkin.com/post/119943127151/angular-2-template-syntax</a> I tried creating a directive to split things out:</p>
  
  <pre><code>@Directive({
      selector: "[Data]",
      host: {
          "[DataValue]": "Data",
          "(DataChanged)":"DataChanging.next($event)"
      }
  })
  export class DataBinding {
      @Input() Data: any;
      @Output() DataChanging: EventEmitter&lt;any&gt; = new EventEmitter();
      ngOnInit() {
          let vData = this.Data;
      }
  }
  </code></pre>
  
  <p>Where I would then use it like this:</p>
  
  <pre><code>&lt;template-for-inputbox [(Data)]="SomeObject.Value"&gt;&lt;/template-for-inputbox&gt;
  </code></pre>
  
  <p>As opposed to:</p>
  
  <pre><code>&lt;template-for-inputbox [DataValue]="SomeObject.Value"
                         (DataChanged)="SomeObject.Value = $event"&gt;
  &lt;/template-for-inputbox&gt;
  </code></pre>
  
  <p>The objects and number of times this comes up makes the bottom version just a mess.</p>
  
  <p>But so far only the bottom version is working, the values I'm dealing with in the top version don't do anything.</p>