Ever wondered why you load your component and now do API call?

What you might be familiar with is, showing a loader after rendering your component and also watching if to hide or show a page loader, or have a user/client asked this question

Why are we showing loader after the page has loaded, can’t it show my data once, check this wordpress site, it’s loading the data once — unknown client

Resolver in Action

No Resolver — Regular Process

Error Handling: The component is loaded, the data loading from API is called to get the data needed for our page or component useful. Why move to a page when the data needed for the page to be useful to users is not loaded?

Loader: You need to manage a loader variable to toggle the view when the data is loaded or not if the data is scattered around the page, you use data all over to toggle the visibility of each. What about having a SINGLE Navigation Event router loader and you don’t bother if to watch for a variable to toggle visibility?

It’s preferable to pre-fetch data from the server so it’s ready the moment the route is activated. This also allows you to handle errors before routing to the component

https://angular.io/guide/router#resolve-guard

If you are pleased with the above concerns, you can continue 😉

What we are going to do is create the above application used in describing resolvers

Create an angular app with angular cli

ng new resolver

Create our Routes

create a file src/app/app.routes.ts and add insert the below code

app.routes.ts

added route param with-error to mock when there’s an api failure or not which can either be true|false . Let’s create our pages/components

ng g c home -it -is --spec false

ng g c records -is --spec false

We are going to create our resolver to handle what the record page is going to respond to if there’s an error or not with our api

ng g s resolvers/recordComp --spec false

open the created service file above, we need to implement the angular’s resolver interface

record component resolver

What made the injectable service a resolver is just the implementation of Resolve<T> where T is the expected return value, which is specified as IReturn interface. Our MockHttpService is like our api provider, where do our main api calls to the server, and returning async of the data from the server.

Observation from the above Resolver file, nothing needed to manage the load state of the application, like page loader. How’s it going to trigger loading? we are coming to this soon. The error handling was simplest as we just did a broadcast of the error using NgAlert inbuilt service and throw the error to the router.

Now, that we have created our resolver, which is going to return the data needed for our records.component.ts to be a meaningful page, open the component, let’s retrieve the data from our resolver and move on with our normal display or manipulation of the data

records.component.ts

Our component template can use the data|dynamicTitle as if the data was bundled with the component. 😊

Final step, let’s apply our resolver to the records.component.ts route by adding this extra key to the route object in app.routes.ts

...

{ path: 'records/:with-error', component: RecordsComponent, resolve: { pageData: RecordCompResolver }

...

Using the resolve key , we can add multiple resolvers for a route, key-value pair, where the key is where the resolved value of the respective resolver is going to store the value and then we can retrieve like so

this._route.snapshot.data[key] = ResolvedValue

Back to the Question, How’s it going to trigger loading? all we only need is to hook into the angular’s navigation events an manipulate the page loader, check the below post to help out with how to include one easily

For the above gif demo check : https://theo4u.github.io/Angular-resolvers/

Dependencies For the DEMO GIF