Angular: Textarea Show Different Rows Different Character Count

Angular: TextArea is defined under the table as 5th column, now implemented changes to include character count, Count is visible but for all rows only the 1st row count is showing.

Solution 1:

The problem is you are assigning a global variable to all rows, instead of specific one for each row. On the [(ngModel)]="value" you should assign the rowData count, like [(ngModel)]="rowData[value]" where rowDatais your current row.

Your html has to be like this:

<ng-template pTemplate="body" let-rowData>
  <td>
   <div class="textarea-wrapper">
    <textarea pInputTextArea [(ngModel)]="rowData.value" 
     (ngModelChange)="valueChange(value,rowData)" maxlength="1000">        
    </textarea>
    <span class="remaning">{{rowData.remainingText}}</span>
  </div>
</td>

rowData.value is your textArea value, I don't know which attribute do you use.

On your .ts:

valueChange(value,rowData) {
    rowData.remainingText = rowData.remainingText || 1000; // remainingText is the value from your textarea, and rowData the whole object
    rowData.remainingText = 1000 - rowData.remainingText.length;
 }