title: Call a function every time a user updates an input text field in Angular
body: <p>My objective is to call a function whenever an user modifies in an input text field.</p>
  
  <p>In my example every time the user adds or deletes a character in the text field it should call <code>didModify()</code> in synchronous thus adding 1 to <code>changeCounter</code>.</p>
  
  <p>My <strong>.html</strong>:</p>
  
  <pre><code>&lt;div class="pb-1"&gt;
    &lt;input maxlength="10" placeholder="Text"&gt;
  &lt;/div&gt;
  &lt;p class="changedClass"&gt;{{changeCounter}}&lt;/p&gt;
  </code></pre>
  
  <p>My <strong>.ts</strong></p>
  
  <pre><code>export class AppComponent  {
    name = 'Angular 6';
    text1 = '';
    changeCounter = 0;
  
    didModify() {
      this.changeCounter = this.changeCounter + 1;
      return this.changeCounter;
    }
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/angular-bzfxua" rel="nofollow noreferrer">Live Demo is here.</a></p>
  
  <p>I saw in the past, it was $watch but I couldn't find an example in the official docs for Angular 5.</p>