How to get the previous value in (input) event in angular 4 - html

Question

I am trying to add the value and also need to remove the previous value by comparing with a new value.
var total = [];
onSearchChange(event) {
total.push(event);
var sumNumber = total.reduce(
(acc, cur) => acc + Number(cur),
0
);
console.log("get all the changed value, I need to remove the previous values in the total list");
}
<input type='number' (input)="onSearchChange($event.target.value)" />

Answer 1

I don't know if the event itself retains the previous value. You can create a component property to hold the previous value and set it in every input event.
<input id="inputId" type="number" value=23 (input)="foo($event.target.value)">
// have some default value only if you want
previousValue: number
foo(value) {
console.log("previous value ", this.previousValue);
console.log("new value ", value);
this.previousValue = value
}
ngAfterViewInit() {
this.previousValue = parseInt((<HTMLInputElement>document.getElementById('inputId')).value)
}
https://stackblitz.com/edit/angular-ufd15s?file=src%2Fapp%2Fapp.component.ts
You can also add a helper event listener keydown (which seems unnecessary but just saying) on the input element. keydown will occur before input so with keydown you can grab the previous value. https://stackblitz.com/edit/angular-sjxvgp?file=src%2Fapp%2Fapp.component.ts