Angular: Show Text Area Character Count INSIDE the textarea

Question

Angular5: Need to build an application, in which have to show TextArea character count inside the textarea, not outside.

Finding numerous ways to show character count, i am able to do that, but Is it possible any how to show that character COUNT inside the TextArea ?

Code: HTML file

<td>
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span>{{remainingText}}</span>
 </td>

.ts file

 valueChange(value) {
  this.remainingText = 1000 - value;
 }

Answer 1

you can add container to the textarea with

position: relative

and then put your counter inside the same relative parent with

 position:absolute

and control position by top and right properties.

<td>
<div class="textarea-wrapper">
<textarea pInputTextArea [(ngModel)]="value" (ngModelChange)="valueChange(value)" maxlength="1000"></textarea>
<span class="remaning">{{remainingText}}</span>
</div>
 </td>

and in css :

.textarea-wrapper {
   position:relative;
}
.remaning {
position:absolute;
bottom: 10px;
right:10px;
}