Sharing Top Content from the Angular-sphere.

HTTP Example with Observables • HTTP • Angular 5

  • Pressing a Search button every-time we want to make a search is so 2012, lets change our application so it uses a reactive form and performs a search as we type.
  • We’ve covered reactive forms before so we just need to change our AppComponent to add a search field, like so: – – We also change our component to setup a form model, like so: – – We’ve implemented the  ngOnInit function so we can work with our search control once it’s been linked to the form…
  • We also have the  returning an  via the search function with the results of performing a search.
  • To start with lets use the  operator, like so: – – If we ran the above and looked at the logs, instead of seeing see an array of  printing out we see something that looks like an  , like so: – – One workaround would then be to just try doing two subscribes, like so: – -…
  • Using with is such a common occurrence that there is a combined operator called , which we’ll use – – Our code now looks like this:

In this lecture we’ve covered, in depth, how to use observables when making HTTP requests. The goal of this lecture was to show you how you can evolve your application from one that uses just a little bit of observables to one that uses a lot more. Hopefully you now have a much better idea of how …

Pressing a Search button every-time we want to make a search is so 2012, lets change our application so it uses a reactive form and performs a search as we type. We’ve covered reactive forms before so we just need to change our AppComponent to add a search field, like so:

We also change our component to setup a form model, like so:

We’ve implemented the  ngOnInit function so we can work with our search control once it’s been linked to the form element.

We now subscribe to the observable our searchField exposes via the  valuesChanged property, we use debounceTime and  distintUntilChanged so we only get notified when the user really wants us to make a query.

We now have an  on the which emits a search term every time we want to perform a search.

We also have the  returning an  via the search function with the results of performing a search.

How do we link these two together?

Through a chain of operators we want to convert that into an  .

To start with lets use the  operator, like so:

If we ran the above and looked at the logs, instead of seeing see an array of  printing out we see something that looks like an  , like so:

One workaround would then be to just try doing two subscribes, like so:

This is a common problem with so…

HTTP Example with Observables • HTTP • Angular 5

Comments are closed, but trackbacks and pingbacks are open.