Connecting information flows – high-order operators

As we saw at the beginning of the chapter, there are many uses of observables besides an HTTP request. In our task, we will exemplify this use. In a reactive form, a user typing into a field is treated as an observable.

In our example, let’s change the NewEntryFormReactiveComponent component:

ngOnInit(): void {
  this.entryForm.valueChanges.subscribe((model) => console.log(model));
  . . .
}

Running our application, we can see in the browser’s console that typing into any form field triggers an event captured by the subscribe method.

Knowing that we can react to user typing events, how do we connect this event to the search for exercise information in the API? We use an operator!

Back in our component, we will refactor the code:

public exercises$ = this.entryForm.valueChanges.pipe(
  switchMap((model) => this.exerciseService.getExercises(model?.exercise))
)...