title: Handle Model Change in Angular 5 Component (Two-way-binding)
body: <p>I'm currently working on an angular 5 application. I try to alter a member variable of my component in an input on the view and use the variable in my component after the change.</p>
  
  <p>My structure is as follows:</p>
  
  <p><strong>Folder</strong>: my-test</p>
  
  <ul>
  <li>my-test.component.html </li>
  <li>my-test.component.css</li>
  <li>my-test.component.ts</li>
  </ul>
  
  <p><em>1) my-test.component.html:</em></p>
  
  <pre><code>&lt;input [(ngModel)]="hello" /&gt;
  </code></pre>
  
  <p><em>2) my-test.component.ts:</em></p>
  
  <pre><code>import { Component, OnChanges, SimpleChanges } from '@angular/core';
  
  @Component({
    selector: 'my-test',
    templateUrl: './my-test.component.html',
    styleUrls: ['./my-test.component.css']
  })
  export class MyTestComponent implements OnChanges {
    hello: string = "bonjour";
  
    constructor() { }
  
    ngOnChanges(changes: SimpleChanges) {
      // I'd like to log the changes of my field 'hello', 
      // once it get's changed in the input on the ui...
  
         console.log(changes);
    }
  
  }
  </code></pre>
  
  <p>Unfortunately this solution doesn't work. Do you know how to change an component's variable on the ui and use it in the component afterwards?</p>
  
  <p>Thank you!!</p>