title: Character counter for input element
body: <p><strong>In Angular, when using template-driven forms, how can I display a character-counter for an input element?</strong></p>
  
  <p>Caveat: The input element needs to update the model on <code>blur</code>, due to my validation logic. But I would like the character counter to update on <code>change</code>, i.e. on every keystroke.</p>
  
  <pre><code>&lt;input
      type="text" 
      minlength="3"
      maxlength="20"
      required
      [(ngModel)]="model.title"
      name="title"
      #title="ngModel"
      id="title"
      class="form-control"
      [ngModelOptions]="{updateOn: 'blur'}
  &gt;
  
  &lt;!-- validation --&gt;
  &lt;div *ngIf="title.touched &amp;&amp; !title.valid" class="alert alert-danger"&gt;
      &lt;div *ngIf="title.errors.required"&gt;Please enter a title&lt;/div&gt;
      &lt;div *ngIf="title.errors.minlength"&gt;Too short&lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- counter --&gt;
  &lt;div class="counter&gt;
      {{ model.title.length }}/20
      &lt;!-- Problem: This way the counter will only update when the model updates --&gt;
  &lt;/div&gt;
  </code></pre>