Uma maneira diferente de lidar com esses casos é usar o formControl e se inscrever valueChanges
quando o componente for inicializado, o que permitirá que você use operadores rxjs para requisitos avançados, como a solicitação de http, aplique um debounce até que o usuário termine de escrever uma frase, use o último valor e omitir anterior, ...
import {Component, OnInit} from '@angular/core';
import { FormControl } from '@angular/forms';
import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
@Component({
selector: 'some-selector',
template: `
<input type="text" [formControl]="searchControl" placeholder="search">
`
})
export class SomeComponent implements OnInit {
private searchControl: FormControl;
private debounce: number = 400;
ngOnInit() {
this.searchControl = new FormControl('');
this.searchControl.valueChanges
.pipe(debounceTime(this.debounce), distinctUntilChanged())
.subscribe(query => {
console.log(query);
});
}
}