Counting characters inside of a textarea using Angular

Question

I have a textarea and need to calculate how many characters have been typed into it.

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

Option A:

<textarea 
   id="descriptionEducation" 
   name="description" 
   rows="5" 
   [(ngModel)]="fruit.description"></textarea>

<div class="form-row__description">
    You have written {{ fruit.description.length }} characters
</div>

Option B:

<textarea 
   id="descriptionEducation" 
   name="description" 
   rows="5" 
   [ngModel]="fruit.description" #descriptionFruit></textarea>

<div class="form-row__description">
    You have written {{ descriptionFruit.value.length }} characters
</div>

Answer 1

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.

Answer 2

Both are indeed completely valid. But since Angular is a databinding framework I would suggest using the two-way binding directive [(ngModel)] to keep things more Angular.

Answer 3

I would go with Forms and will do it totally async way.

<textarea 
   id="descriptionEducation" 
   name="description" 
   rows="5" 
   [formControl]="textControl"></textarea>

<div class="form-row__description">
    You have written {{ descriptionLength | async }} characters
</div>

Inside of component

public textControl = new FormControl('');
public descriptionLength = new BehaviorSubject(0);
constructor(){
  this.textControl.valueChanges.subscribe((v)=> this.descriptionLength.next(v.length));
}

Now you can even mark you control ChangeDetectionStrategy.OnPush and it will work