title: Changing Component Property from Directive in Angular2
body: <p>I have an Angular 1 app that works with a simple <code>contentEditable</code> directive, which can be used like this in templates:</p>
  
  <pre><code>&lt;span contenteditable="true"  ng-model="model.property" placeholder="Something"&gt;
  </code></pre>
  
  <p>Editing the element would fire <code>$setViewValue(element.html()</code> and it worked as expected.</p>
  
  <p>I would like to make something in Angular2 with a similarly succinct template syntax. Ideally, I would like the template to look like this:</p>
  
  <pre><code>&lt;span contentEditable="true" [(myProperty)]="name"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>where 'name' is a property on the component and have the directive update the component when changed. I feel like I'm close with this (<a href="http://plnkr.co/edit/LNg21LqAwHpbjFzI7cMq" rel="noreferrer">Plunker Link</a>):</p>
  
  <pre><code>//our root app component
  import {Component, Input, Output Directive, ElementRef, Renderer, OnInit} from 'angular2/core'
  
  @Directive({
      selector: '[contentEditable]',
      host: {
          '(blur)': 'update($event)'
      }
  })
  
  export class contentEditableDirective implements OnInit {
      @Input() myProperty;
      constructor(private el: ElementRef, private renderer: Renderer){}
  
      update(event){
        this.myProperty = this.el.nativeElement.innerText;
      }
      ngOnInit(){
          this.el.nativeElement.innerText =  this.myProperty; 
      }
  }
  </code></pre>
  
  <p>This idea works if I pass an object like <code>{name: "someName"}</code> but if just pass a property it seems like it's passing the value, but not the reference and so the binding doesn't flow back to the component. Is there a way to do this that will still allow a template syntax that isn't verbose but still allows easy reuse of the directive.</p>