How to Implement Angular Resolver?

First of all, we need to understand the working process of the Resolve Interface. It is an essential part that Angular developers need to follow.

To implement a Routing Resolver in Angular project, the developers need to create a new class that will be responsible for implementing the above-defined interface. This interface defines two main route parameters (if you need them) with a resolve method:

● Route: It is of type ActivatedRouteSnapshot

● State: It is of type RouterStateSnapshot

Here, you can create an API call that will get the data you need before your component initialization is loaded.

The route parameter helps the developers to get private route parameters that may be used in the API response call for only resolved data. On the other hand, the resolve method can return an Observable, a promise or just a custom type.

Implementation of a Route Resolver in Angular

To make it simple for you, you can even use a JSON placeholder to implement a demo API for fetching employee data to demonstrate or create API calls with Angular route resolvers.

First of all, we will need a service that will fetch the employee data for us. In this service, we have a function called getEmployees() data that returns an observable.

It is important no to subscribe to the function getEmployees(). The route resolver service called EmployeeResolver will take care of this for you. The next step is to create a new service called EmployeeResolver which will implement the resolve data function of the Resolve interface of the private router.

This service, EmployeeResolver, will subscribe automatically to the getEmployees observable and provide the Angular’s router supports the fetched data. In case of an error, while fetching the data, you can send an empty observable and the router event data will not proceed to the route. The successful route navigation will be terminated at this point.

To understand more details you can activate tracing support by passing a flag when it’s added to the app routes in your business data, like so:

Our own Route reuse strategy help to avoid destroying the particular component during the navigation process. This last step is to create a component that will be called when the user goes to the /employees route.

Without a Resolver, you will need to fetch the data on the ngOnInit hook of the component and handle the errors caused by ‘no data’ exists. The employee’s component is a simple one.

So, once the data load fails, you can efficiently replace it the same with an error message and a retry link.

After you have created the employee’s component, you need to define the routes and tell the router to use a resolver in Angular development ( EmployeeResolver). This Angular routing process could be achieved with the following example code into the routing module file named app-routing.modulte.ts.

You need to set the resolve property into the employee’s following route configuration and declare the EmployeeResolver as defined in the above code. The data from the export class AppModule will be passed into an object with a property called employees.

After that, you are almost done. There is only one thing you need to do.

You must get the fetching data into the employees’ component by using the activated route data property via the ActivatedRoute with the following code.

There is only one thing you need to do. You must get the fetched data into the employees’ component via the ActivatedRoute with the following angular code.

Then, you can just display them into HTML without any *ngIf statements (

*ngIf=”employees && employees.length > 0 ) because the load data activate will be there before the component rendered is loaded.

Conclusion

So, we have seen the implementation of a resolver in Angular development that gets loaded data from the Employees API before navigating to a route related property that displayed the gathered data. And it is made possible by utilizing @angular/router, @angular/common/http, and rxjs.

Get in touch with one of the best AngularJS Development company that always strive to provide the best possible web app solutions for your business requirements.