How to create Undo and Redo value functionality from input tag in Angular?

Question

I want to create a functionality which undo and redo value from input tag in angular. What I supposed to do is as follows if I enter Hello in input:

1. click undo button : show hell
2. click undo button : show hel
3. click redo button : show hell
4. click redo button : show hello

Please help. Thanks

Answer 1

You can do in your.ts:

  inputValue: string = '';
  inputStates: string[] = [];
  undoStats: number = 0;

  onChanges(change) {
    this.inputStates.push(change);
    this.undoStats = 0;
  }

  undo() {
    this.undoStats++;
    this.inputValue = this.inputStates[this.inputStates.length - (this.undoStats + 1)];
  }

  redo() {
    if (this.undoStats > 0) this.undoStats--;
    if (this.undoStats >= 0)
      this.inputValue = this.inputStates[this.inputStates.length - (this.undoStats + 1)];
  }

and in html:

<div>
  <input
    type="text"
    [(ngModel)]="inputValue"
    (ngModelChange)="onChanges($event)"
  />
  <br />
  <button (click)="undo()">Undo</button><button (click)="redo()">Redo</button>
</div>

You'll only need to find a point at which you'll clear this.inputStates (like onSubmit or something like that).

Answer 2

There is the functionality already present by the system in input. You can try out the control z button and control y button.

If you want to create your own by then you have to add the mapping of user input fields and values and listen to the undo and redo events and based on that do the undo and redo by going up and down the array