Fetching Component Data in the Route using Reactive Selectors

Using dropdown selectors

The address and credit card inputs are simplified to just dropdowns in this example, filled in with data fetched from the server.

While you could add a few ajax calls in the component itself, Angular’s routing allows you to define the async data as component needs and load it alongside all of the other data that component needs. This can be used to gracefully handle errors and redirect as the component loads.

To fetch custom data during the routing, you need to create a special type of service called a Resolver.

Resolver

A resolver is just a fancy name for a service with a resolve method that gets called when Angular needs to route to a given page.

resolve method

Our resolve method will make two AJAX calls and return an observable of the resulting data.

Let’s generate a service with ng g service user-detail-resolver and fill in the details with the following: