Angular2: how do display character count on reactive form input
<p>I'm using Angular2 reactive forms, and I want to display a character count of a <code>textarea</code> as the user types.</p>

<p>I was hoping to just be able to include the form control's <code>name.length</code> in my html like so:</p>

<pre><code>&lt;div class="form-group"&gt;
  &lt;label for="incidentDescription"&gt;Brief Description of Incident&lt;/label&gt;
  &lt;textarea id="incidentDescription" formControlName="incidentDescription" required [attr.maxLength]="maxIncidentDescriptionLength"&gt;&lt;/textarea&gt;
  &lt;small&gt;&lt;code&gt;{{alaynaPage.incidentDescription.length}}&lt;/code&gt; of &lt;code&gt;{{maxIncidentDescriptionLength}}&lt;/code&gt; characters&lt;/small&gt;
&lt;/div&gt;
</code></pre>

<p>This "works" however the <code>length</code> of the form control lags one keystroke behind. So for example if I type <code>a</code> into the textarea <code>{{alaynaPage.incidentDescription.length}}</code> is 0.  If i then type <code>b</code> (so string is <code>ab</code>) <code>{{alaynaPage.incidentDescription.length}}</code> is now 1.</p>

<p>How do I get this to work as expected?</p>

<p>I got it to work via a hack but there has to be an easier way:</p>

<pre><code>//in component:  
theLength: number = 0;
ngOnInit(): void {
    this.buildForm();

    (this.alaynaPageForm.controls['incidentDescription'] as FormControl).valueChanges.subscribe(value =&gt; {
      // do something with value here
      this.theLength = value.length;
    });
  }

//in my html:
&lt;small class="form-text text-muted"&gt;&lt;code&gt;{{theLength}}&lt;/code&gt; of &lt;code&gt;{{maxIncidentDescriptionLength}}&lt;/code&gt; characters&lt;/small&gt;
</code></pre>