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

Issue

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

Solution

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).

Answered By - Misha Mashina