I have a problem with the angular material table. I've added mat-form-field and mat input as table cells, [(ng-model)] to track values and different styles when editing inputs where I'm setting the background color to red when ng-dirty is present. The problem is with pagination, whenever I move to the next page and return to the previous one where something was edited, styles are lost.

I somehow need to preserve ng-dirty on edited fields even though I'm changing pages with paginator.

Stackblitz with code

https://stackblitz.com/edit/angular-r3zkmx?file=src/app/app.module.ts

CodePudding user response：

I would do the following:

• Add a new property to PeriodicElement like originalWeight?:number; and in the PeriodicElement list just duplicate the values for each item like this {position: 1, name: 'Hydrogen', originalWeight:1.0079, weight: 1.0079, symbol: 'H'},

• Add in the styles another class:

input.ng-dirty, input.ng-dirty-back{ background-color: red; }

• in the HTML just do:

<input matInput [(ngModel)]="element.weight" [class]="element.originalWeight!= undefined && element.weight != element.originalWeight ? 'ng-dirty-back':''" />