title: How detect changes in an input field as we type-in [Angular]
body: <p>I'm new to Angular. I'm trying few simple things. I've an Input field. I just want to detect changes. I want to call some code whenever I type into the field. I checked these articles:</p>
  
  <ol>
  <li><a href="https://angular.io/api/core/OnChanges" rel="noreferrer">Documentaion: Angular - onChanges</a></li>
  <li><a href="https://stackoverflow.com/questions/38629828/what-is-the-difference-between-onchanges-and-docheck-in-angular-2">What is the difference between OnChanges and DoCheck in Angular 2?</a></li>
  <li><a href="https://angular.io/guide/lifecycle-hooks#lifecycle-sequence" rel="noreferrer">Documentaion: Angular - Lifecycle hooks</a></li>
  <li><a href="https://stackoverflow.com/questions/44768798/in-angular-4-the-hook-ngonchanges-is-not-firing-on-input">Stackoverflow: In Angular 4 the hook ngOnChanges is not firing on input</a></li>
  </ol>
  
  <p>Here's my code:</p>
  
  <p><strong>my-component.component.html</strong></p>
  
  <pre><code>&lt;input [(ngModel)]="text"&gt;
  </code></pre>
  
  <p><strong>my-component.component.ts</strong></p>
  
  <pre><code>import { Component, OnInit, DoCheck } from '@angular/core';
  
  @Component({
    selector: 'app-my-component',
    templateUrl: './my-component.component.html',
    styleUrls: ['./my-component.component.css']
  })
  export class MyComponentComponent implements OnInit, DoCheck {
  
    text="hello world";
  
    constructor() { }
  
    ngOnInit() {
    }
  
    ngOnChanges(changes: SimpleChanges) {
      // changes.prop contains the old and the new value...
    }
  
    // ngDoCheck() { // TRIED THIS ALSO
    //   console.log("Changes detected")
    // }
  }
  </code></pre>
  
  <p><strong>Two important information:</strong></p>
  
  <ol>
  <li><p>I tried <code>DoCheck</code> also, but this is not what I want. I want to see if <strong>only input field's</strong> value is changed or not. But <code>ngDoCheck</code> will be called after every slight change in the rest of the components also as it is using <code>zone.js</code> ( i read this somewhere).</p></li>
  <li><p>I can't use <code>(keydown)</code> also as I want to implement validation code later. I want validation to happen as I type-in. But with keydown, i noticed that I've to trigger validation code with some key-press even after the entered value is valid, let's say a Date/Time.</p></li>
  </ol>
  
  <p>Keeping above two points in mind, please correct me. Here's the <a href="https://stackblitz.com/edit/angular-lmsqgr" rel="noreferrer">stackblitz</a>. </p>