How to change background color in an NgFor input if the value changed?

548 Views Asked by At
<ng-container *ngFor="let obj of List">
      <mat-form-field ngDefaultControl class="form-field" appearance="outline">
        <input
          matInput
          type="number"
          placeholder="0"
          [(ngModel)]="obj.value"
          onfocus="this.select()""
        />
      </mat-form-field>
    </ng-container>

// I am trying to modify the background color of the input element if the value changed in it.

1

There are 1 best solutions below

0
Mohit Sharma On

here is list array of object

public List = [
  {
    actualValue: 1,
    value: 1,
  },
  {
    actualValue: 2,
    value: 2,
  },
  {
    actualValue: 3,
    value: 3,
  }
];

and just use [ngStyle] to place class

<ng-container *ngFor="let obj of List">
   <mat-form-field
     ngDefaultControl
     class="form-field"
     appearance="outline"
     [ngClass]="{ red: obj.value !== obj.actualValue }"
   >
     <input
       matInput
       type="number"
       placeholder="0"
       [(ngModel)]="obj.value"
       onfocus="this.select()"
     />
   </mat-form-field>
</ng-container>  

and red is class name in [ngClass]