My table has cell editing functionality using primeng, and the data is fetched from an API which results in varying row quantities and orders. I want to dynamically change the row color to red if the word size is incorrect or green if the size is correct.
I believe I need to capture the index of the edited row and then apply the color change accordingly.
<p-table [value]="valProd" responsiveLayout="scroll" (onEditInit)="onEditInit($event)" (onEditCancel)="onCancelInit($event)">
<ng-template pTemplate="header">
<tr>
<th>Name</th>
<th>Value</th>
<th>Size</th>
</tr>
</ng-template>
<ng-template pTemplate="body" let-valProd let-rowData>
<tr>
<td>
<p-cellEditor>
<ng-template pTemplate="output">
{{ rowData.Name}}
</ng-template>
</p-cellEditor>
</td>
<td [pEditableColumn]="rowData.Value" pEditableColumnField="rowData.Value">
<p-cellEditor [ngStyle]="{'background': colorTry}">
<ng-template pTemplate="input">
<input pInputText
type="text"
[(ngModel)]="rowData.Value"
name="value"
(change)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.Name)"
(keydown.enter)="checkWriteValue(rowData.Value, rowData.Size, rowData.HasFixedLength, rowData.name)"
>
</ng-template>
<ng-template pTemplate="output" id="pruebainput">
{{rowData.Value}}
</ng-template>
</p-cellEditor>
</td>
<td>
<p-cellEditor>
<ng-template pTemplate="output">
{{ rowData.Size}}
</ng-template>
</p-cellEditor>
</td>
</tr>
</ng-template>
</p-table>
I attempted to use ngstyle for this purpose but all rows were affected. I need a way to work with each row independently.
The goal here is to verify the size of the word when the cells are edited by pressing enter or losing focus. If the size is correct, the row background should turn green; if it's incorrect, it should turn red. Multiple rows can have the same color.