Una delle dipendenze principali di Angular è RxJS (Reactive Extensions) la cui classe principale Observable viene largamente usata in molte parti del codice. Uno dei punti in cui Observable viene usata è nella proprietà valueChanges della classe FormControl che fa parte del modulo ReactiveFormsModule. Questa proprietà invia al sottoscrittore dell'observable un messaggio con il contenuto della textbox ogni volta che il valore della textbox cambia. Questo significa che se ci sottoscriviamo alle notifiche pubblicate dalla proprietà valueChanges, riceviamo una notifica per ogni volta che l'utente digita un carattere nella textbox.

In una form di ricerca questo evento può essere utile perchè al cambio del campo di ricerca dobbiamo aggiornare i dati. Se lanciamo l'algoritmo di ricerca ogni volta che l'utente cambia il campo rischiamo di lanciare l'algoritmo molte volte in modo inutile in quanto il risultato che ci interessa è solo l'ultimo. Inoltre, se l'algoritmo di ricerca prevede chiamate al server, effettueremmo molte chiamate inutili visto che è solo l'ultima che ci serve. In questi casi ci possono venire in aiuto gli operatori di RxJS debounceTime, distinctUntilChanged e switchMap. Il primo fa in modo che la notifica venga inviata ai sottoscrittori non subito ma solo dopo un tempo specificato in millisecondi, il secondo fa in modo che passato il debounce time, venga inviato l'evento solo se il valore della texbox è cambiato mentre il terzo annulla i risultati delle precedenti eventuali chiamate tornando al sottoscrittore solo il l'ultimo risultato.

this.fc.valueChanges
  .pipe(
    debounceTime(200),
    distinctUntilChanged(),
    switchMap(e => invokeService(e))
  )
  .subscribe(e => doSomething());

In questo esempio, la notifica viene inviata ogni 200 millisecondi e solo se il valore è cambiato.