title: 2 way databinding in Aurelia custom elements - bind custom element to parent viewmodel
body: <p>In my application I have made a lot of "services" which I can inject in my viewmodels to save som redundancy and time.</p>
  
  <p>Now I'm looking to take it 1 step further, and make those form elements (select, text, checkboxes - a select dropdown for starters) and turn them into custom elements, injecting the service in only the custom element.</p>
  
  <p>I can get it working to some extent. The custom element (select in this case) is showing when I require it in the "parent" view, however when I change the selected value of the custom select element, it does not bind to the "parent" viewmodel, which is my requirement.</p>
  
  <p>I want to be able to bind my selected value from the custom element to a property on the "parent" viewmodel via the bind attribute in it's template.</p>
  
  <p>I'll update which a little code snippet in a few minutes.</p>
  
  <p>create.js (what I refer to as parent viewmodel)</p>
  
  <pre><code>import {bindable} from 'aurelia-framework';
  export class Create{
      heading = 'Create';
      @bindable myCustomElementValue = 'initial value';
  }
  </code></pre>
  
  <p>create.html (parent view)</p>
  
  <pre><code>&lt;template&gt;
      &lt;require from="shared/my-custom-element"&gt;&lt;/require&gt;
      &lt;my-custom selectedValue.bind="myCustomElementValue"&gt;&lt;/my-custom&gt;
      &lt;p&gt;The output of ${myCustomElementValue} should ideally be shown and changed here, as the select dropdown changes&lt;/p&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>my-custom.js</p>
  
  <pre><code>import { inject, bindable} from 'aurelia-framework';
  import MyService from 'my-service';
  
  @inject(MyService )
  export class MyCustomCustomElement {
      @bindable selectedValue;
  
      constructor(myService ) {
          this.myService = myService ;
      }
  
      selectedValueChanged(value) {
          alert(value);
          this.selectedValue = value;
      }
  
      async attached() {
          this.allSelectableValues = await this.myService.getAllValues();
      }
  }
  </code></pre>
  
  <p>What happens is initially the create.html view outputs "initial value", and as I change the value of the custom element select, the newly selected value gets alerted out, but it does not update the bound parent variable, which is still just displaying "initial value".</p>