How to execute API call after entering 3 characters in field?
I think you need distinctUntilChanged And you can use the filter in the pipe
this.myService.getDataFromService(data)
.pipe(
filter(_ => data.length === 3),
distinctUntilChanged()
).subscribe(rs => console.log(rs));
Below is the little tweak in your code and it will fulfill the requirement told by you.
You can definitely improve this process using debounce, distinctUntilChanged, switchMap operators.
previousData = '' // create a property which will track of previous data from parent component.
getInputField(data){
if(data && data.length === 3 && data.length > previousData.length){
this.myService.getDataFromService(data).subscribe(rs=>console.log(rs));
}
this.previousData = data || ''; // update previous data to current data after backend call.
}