How to detect change in input using Angular8

Question

i have edit and close button in same row, if there is any edit made to the input field then it must show an alert message, if no change is made it must retain its old value. My issue here is, i click on edit and do some change to input, when i click on close, i am able to retain new value, but when i click on close, it must revert to old value

TS:

 public onEditEvent(event) {
    this.editCommitment = event;
  }

  public onCloseEvent(event){
    if(event.policyCT == this.editCommitment.policyCT && event.quotes == this.editCommitment.quotes && event.writtenPremium == this.editCommitment.writtenPremium) {
      event.writtenPremium = this.editCommitment.writtenPremium;
      event.policyCT = this.editCommitment.policyCT;
      event.quotes = this.editCommitment.quotes 
      this.editableRow = 0;
    } else {
      alert('change')
    }
  }

Demo

Answer 1

By default ng-model will update the model. You need to maintain old value manually when user clicks on edit button. Like below:-

 selectedRow: any;
  public onEditEvent(event) {
    this.selectedRow = { ...event };
    this.editCommitment = event;
  }

Apply that when user click on close button.

  public onCloseEvent(event) {
    event.writtenPremium = this.selectedRow.writtenPremium;
    event.policyCT = this.selectedRow.policyCT;
    event.quotes = this.selectedRow.quotes;
    this.editableRow = 0;
  }

And on Save click you dont have to do anything as model is already updated.

Working Demo:- https://stackblitz.com/edit/angular-turxyo?file=src%2Fapp%2Fapp.component.ts