How can we detect changes in table data when users add input to cells?
For example, if a user clicks on a cell and adds an input, the function should return TRUE to indicate that there are changes. If the user just clicks on the cell without making any changes or updating any field, it should return FALSE.
One approach could be passing the row data to the edit() function and then comparing it to the existing dataSource to check for any changes in values.
The goal is to identify any updates or modifications in the dataSource.
Thank you for any assistance and ideas.
#blitz
https://stackblitz.com/edit/am-all-imports-65vtbu?file=app%2Fapp.component.html
#ts code
options: string[] = ['position', 'name', 'weight', 'symbol', 'symbol2'];
dataSource = ELEMENT_DATA;
edit(index: number, column: string) {
this.editableColumn = column;
this.editableIndex = index;
}
showInput(index: number, column: string) {
return this.editableColumn === column && this.editableIndex === index;
}
showValue(index: number, column: string) {
return this.editableColumn !== column || this.editableIndex !== index;
}
reset() {
this.editableColumn = '';
this.editableIndex = null;
}
}
#html code
<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
<!--- Note that these columns can be defined in any order.
The actual rendered columns are set as a property on the row definition" -->
<!-- Position Column -->
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef>No.</th>
<td
mat-cell
*matCellDef="let element; let i = index"
(click)="edit(i, 'position')"
>
<span *ngIf="showValue(i, 'position'); else editPlace">{{
element.position
}}</span>
<ng-template #editPlace>
<mat-form-field>
<input
matInput
placeholder="Placeholder"
(blur)="reset()"
appFocusOnLoad
[(ngModel)]="element.position"
/>
</mat-form-field>
</ng-template>
</td>
</ng-container>