CODEWITHSUNDEEP
javascriptangulartypescriptangular5angular7
user12172359
user12172359

Reputation:

Angular: Show Text Area Character Count INSIDE the textarea

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;
 }

Upvotes: 9

Views: 26761

Answers (3)

Yahya Essam
Yahya Essam

Reputation: 1912

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;
}

Upvotes: 8

Surjeet Bhadauriya
Surjeet Bhadauriya

Reputation: 7156

So You can achieve this with styles.

Stackblitz link

HTML 

<textarea [(ngModel)]="desc" class="custom-textarea"></textarea>

<div class="count-div">
    <div *ngIf="desc.length" class="count-text" >{{desc.length}}</div>
</div>

CSS

.custom-textarea {
    outline: none;
    resize: none;
    border-right:0;
}

.count-div {
  height: 34px; 
  width: 20px;
  border: 1px solid rgb(169, 169, 169); 
  color: grey; 
  font-size: 14px; 
  border-left:0;
}

.count-text {
  margin-top:15px;
}

.display-flex {
  display: flex
}

Upvotes: 5

Prashant Pimpale
Prashant Pimpale

Reputation: 10707

It must be:

value.length

Not

value

Upvotes: -2

Related Questions