title: Angular 4 - Custom two way binding
body: <p>I am trying to implement a custom two way binding between two of my components. </p>
  
  <p>I did read about the naming convention saying that you have to define a <code>@Input()</code> like "<code>test</code>" and then define a <code>@Output()</code> named "<code>testChange</code>".</p>
  
  <p>I couldn't find anything about whether this is still up-to-date or not and I can't get my binding to work. </p>
  
  <p>Some code within parentComponent: </p>
  
  <p><code>&lt;my-comp [(userGroupIds)]="userGroups"&gt;&lt;/my-comp&gt;</code></p>
  
  
  
  <p>MyComponent (child): </p>
  
  <pre class="lang-js prettyprint-override"><code>export class MyComponent implements OnInit, OnDestroy{
    @Input() userGroupIds: number[];
    @Output() userGroupIdsChange = new EventEmitter&lt;number[]&gt;();
  
    updateValues(){
      //here I am iterating through the rows of a table within my component
      this.userGroupIds = this.tableRows.map(item =&gt; {return item['id']});
      this.userGroupdIdsChange.emit(this.userGroupIds);
    }
  }
  </code></pre>
  
  <p>parentComponent: </p>
  
  <pre class="lang-js prettyprint-override"><code>export class parentComponent implements OnInit, OnChanges, OnDestry{
    userGroups: number[];
    constructor(){
      this.userGroups = [];
    }
  
    ngOnChanges(changes: SimpleChanges){
      if(changes['userGroups']){
        // this is never show, ngOnChanges doesn't get fired;
        console.log(this.userGroups);
      }
    }
  }
  </code></pre>
  
  <p>Is there something I am missing? Did the Angular-Team change anything? </p>
  
  <p>Afaik the binding does something like </p>
  
  <pre class="lang-html prettyprint-override"><code>[userGroupsIds]="userGroups" (userGroupsIdsChange)="userGroupIds=$event"
  </code></pre>
  
  <p>So I tried setting this myself, but no update either. Only thing that work was passing a function to the eventEmitter.</p>