Changing Component Property from Directive in Angular2
<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>