How to show the number of characters in textarea only with template variable?-CodePudding

I want to show the number of characters in textarea only with a template variable (reference) editor.

My Pseudo Code:

<p>{{editor.textarea.length}</p>
<div>
    <textarea name="" id="" cols="30" rows="10" #editor></textarea>
</div>

I know we can solve it with the following way but it is not what I am looking for.

export class AppComponent {
  desc:string = "";
}

and

<textarea [(ngModel)]="desc"></textarea>
<div>{{desc.length}}</div>

Question:

How to show the number of characters in textarea only with template variable (without @ViewChild as well)?

CodePudding user response：

replace textarea with value and add (keyup)="null" in html tag

<p>{{editor.value.length}}</p>
<div>
    <textarea name="" id="" cols="30" rows="10" (keyup)="null" #editor></textarea>
</div>

Stackblitz : example