Show button if table data was changed and hide if that's changed back to default

Question

I'm using angular p-table and I have to show save button if data from table was changed. I have implemented also the reorder property and used onRowReorder event to show the button. So now, I have to do something different. I need to show the save button only if table data was changed from default.

So if I move a row down and then put it back, the button shouldn't be visible.

That's what I have now.

Table:

<p-table 
  #dt 
  selectionMode="single" 
  [value]="gridData" 
  [(selection)]="selectedRow" 
  [responsive]="true" 
  [rows]="tableSize" 
  [paginator]="true" 
  [alwaysShowPaginator]="false" 
  [pageLinks]="3" 
  [globalFilterFields]="globalFilterFields" 
  [rowsPerPageOptions]="rowsPerPage"
  scrollable="true" 
  scrollHeight="500px" 
  sortField="priority" 
  sortOrder="1" 
  [reorderableColumns]="true" 
  (onRowReorder)="onRowReorder()" 
  dataKey="name">

Button:

<p-button 
  *ngIf="showSaveBtn === true" 
  class="pull-left mTop12 mBot12" 
  (click)="updatePriority()" 
  label="{{'MappingRules.Buttons.Save' | translate}}" 
  icon="fa fa-refresh">
</p-button>

And here is the current button ts file:

By default is:

public showSaveBtn: boolean = false;

And the function is:

onRowReorder() {
    this.showSaveBtn = true;
}

Answer 1

you can use the onEditInit and onEditComplete to compare the value before and after edit to show and hide button

 previousValue:any;
showSaveBtn:boolean;
onEditInit (event:any){
    this.previousValue=event.data;
    }
    onEditComplete (event:any){
    if(event.data!=this.previousValue){
    this.showSaveBtn=true
    }
    else{
    this.showSaveBtn=false;
    }
    }