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;
}

Possible duplicate of [Angular 2 Show and Hide an element](https://stackoverflow.com/questions/35163009/angular-2-show-and-hide-an-element) — Alberto, Sep 19 '18 at 08:05

score 0 · Accepted Answer · answered Sep 19 '18 at 08:13

0

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;
    }
    }

answered Sep 19 '18 at 08:13

Hana Wujira

870
7
17

Thanks man <3 I used something like this. I just copied the initial **table data** into an array and then onRowReorder event I compared the orignial one with the current. – Sergiu Molnar Sep 19 '18 at 09:56

score 0 · Answer 2 · answered Sep 19 '18 at 09:39

You can use ngClass to check if condition true you can just hide if condition false you can show the button i have update your code hope this will help you.

<p-button 
 [ngClass]="{'showhide': showSaveBtn }"
  class="pull-left mTop12 mBot12" 
  (click)="updatePriority()" 
  label="{{'MappingRules.Buttons.Save' | translate}}" 
  icon="fa fa-refresh">
</p-button>

.showhide{
display:none;
}

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

2 Answers2