Properly handle onchange event on Angular

Question

I've been working with React for the past years, and I'm pretty new to Angular. I am currently trying to create an input field with a normalizer. I can easily do this as a React component, but I can't seem to translate it correctly into an Angular component. If I have to do this with React, my code would be like

const Input = (props) => {
   const [value, setValue] = React.useState('');

   const handleChange = (e) => {
       // insert pre-processing logic
       setValue(e.target.value);
   };

   return (
      <>
         <p>Value: {value}</p>
         <input {...props} value={value} onChange={handleChange} />
      </>
   );
}

I tried coding this in Angular:

@Component({
  selector: 'app-input',
  template: `
    <p>Value: {{value}}</p>
    <input (change)="onInputChange($event)" [value]="value" />
  `
})
export class InputComponent {
  value: string = '';
  onInputChange(e) {
    // insert pre-processing logic
    this.value = e.target.value;
  }
}

My issue with the Angular component is I have to click outside the input field or trigger onblur before the (change) event is fired, unlike the React one where the onChange event is fired every single time the user types. Any advice will be appreciated.