Counting characters inside of a textarea using Angular I have a textarea and need to calculate how many characters have been typed into it.

Both of the following solutions work correctly&mdash;which would be preferable, and why? Is there an even better way to implement it?

Option A:

&lt;textarea 
   id="descriptionEducation" 
   name="description" 
   rows="5" 
   [(ngModel)]="fruit.description"&gt;&lt;/textarea&gt;

&lt;div class="form-row__description"&gt;
    You have written {{ fruit.description.length }} characters
&lt;/div&gt;


Option B:

&lt;textarea 
   id="descriptionEducation" 
   name="description" 
   rows="5" 
   [ngModel]="fruit.description" #descriptionFruit&gt;&lt;/textarea&gt;

&lt;div class="form-row__description"&gt;
    You have written {{ descriptionFruit.value.length }} characters
&lt;/div&gt;
You don't need to declare an extra reference variable. I would suggest the first approach i.e. using [(ngModel)] for two-way data binding. 

However, in the first approach, you must initialize the model value before using it in your template i.e. fruit.description should not be undefined otherwise you'll get the following TypeError:


  Cannot read property 'length' of undefined


Using the second approach, you wont get that error.