How to detect input field value changes in angular with each value insertion?

Using Input

In HTML

<input (input)="type($event)" type="text" />

In TS

 type(event) {
    console.log(event.target.value);
  }

Using ngModel

In HTML

<input type="text" [ngModel]="mymodel" (ngModelChange)="valuechange($event)" />

In TS

mymodel:any
        
 valuechange(newValue) {
   this.mymodel = newValue;
   console.log(newValue)
 }

Demo Link :- Link

you can use [(ngModel)]. I suggest you "split" the "bannana sintax"

<input matInput placeholder="Word" 
          [ngModel]="search" 
          (ngModelChange)="search=$event;doSomething($event)">

doSomething(value:string)
{
    console.log(value)
}

Another ways can be

<!--see that the event "input" return a "generic event"
    so you use $event.target.value to "reach" the value-->
<input matInput placeholder="Word" 
          [(ngModel)]="search" 
          (input)="doSomething($event.target.value)">

Or

<input matInput placeholder="Word" 
          [(ngModel)]="search" 
          (ngModelChange)="doSomething($event)">

By using two-binding and ngModelChange event, worked for me to detect all changes. Sample code :

     <input matInput placeholder="Word"
       [(ngModel)]="search"
       (ngModelChange)="filterTbl()"
       matTooltip="Filter Result">