title: Angular 2: cannot get two ways binding to work in custom component
body: <p>I'm trying to make a simple angular 2 component displaying a switch button. 
  It's almost working, except the parent value is not updated when using ngModel.</p>
  
  <p>Here's my custom component:</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component, Input, Output, EventEmitter } from '@angular/core';
  
  @Component({
  selector: 'app-switch',
  template:` 
  &lt;label class="switch"&gt;
    &lt;input id="switch" type="checkbox" [(ngModel)]="checked"&gt;
    &lt;div class="slider round"&gt;&lt;/div&gt;
  &lt;/label&gt; `,   
  styleUrls: ['./switch.component.css']
  })
  export class SwitchComponent {
  
      checkValue:boolean;
      @Output() checkChange = new EventEmitter();
  
      @Input()
      get checked() {
        return this.checkValue;
      }
  
      set checked(val) {
         this.checkValue = val;
         this.checkChange.emit(this.checkValue);
         console.log("from switch: value = " + this.checkValue);    
      }
  }
  </code></pre>
  
  <p>Here's the parent component with 2 instances of my custom child component. 
  - the first instance works fine but uses separated property [] and event () binding
  - the second one is using two ways bindings [()] but is not working. Any idea what am I missing?</p>
  
  <pre class="lang-ts prettyprint-override"><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'app-root',
    template:`
    &lt;app-switch [checked]="checkValue" (checkChange)="onCheckChanged($event)"&gt;&lt;/app-switch&gt;
    &lt;div&gt;checkBox :&lt;span&gt;{{checkValue}}&lt;/span&gt;&lt;/div&gt;
    &lt;hr/&gt;
    &lt;app-switch [(checked)]="switchValue" &gt;&lt;/app-switch&gt;
    &lt;div&gt;checkBox :&lt;span&gt;{{switchValue}}&lt;/span&gt;&lt;/div&gt;`,
    styleUrls: ['./app.component.css']
  })
  export class AppComponent {
    title = 'app works!';
    checkValue:boolean = false;
    switchValue:boolean = false;
  
    onCheckChanged($event){
      console.log("from AppComponent : " + $event);
      this.checkValue = $event;
  
    }
  }
  </code></pre>
  
  <p>Any advice on this?</p>