Resolver in Angular

1
(No Transcript)
2
Basic Understanding of Angular Resolver

• The ngOnInit hook is commonly used in standard
  Angular application development to fetch data
  from the API and render it to the UI. The
  component renders the loading, skeleton, etc.
  while awaiting the API response to return the
  entire data.
• A different approach would be to get the data
  first and then reroute your component. Route
  Resolver is the name of it. How to manage
  multiple requests without degrading the user
  experience is one of the major problems that many
  Angular developers have in mind.
• The use of Angular Resolution is one of the broad
  solutions to this problem. This post will explain
  how Route Resolver is implemented in Angular and
  respond to the question raised above.

3
What is Resolver in Angular?

• Before choosing the new route, developers can
  obtain data thanks to the Angular route resolver.
  Simply put, it's a seamless method that
  immediately enhances user engagement and
  experience by loading data exactly before the
  user navigates to any particular component.
• In Angular development, a Resolver is nothing
  more than a class that implements the Angular
  Router's Resolve interface. Resolver can be
  summed up as a straightforward service call that
  must be present in the root module. In Angular
  development, a resolver functions like a
  straightforward middleware that can be run before
  the loading of a specific component.

4
Difference Between Basic Routing Flow and Angular
Resolver Flow

• Basic Routing Flow
• The end-user clicks on the link.
• The Angular framework simply loads data from the
  respective component.
• Angular Resolver Flow
• The end-user make click on the link.
• Angular executes certain codes and returns a
  value or data observable.
• You can collect the returned value or observable
  in the constructor or ngOnInit, in the data
  provider class of your component which is about
  to load.
• Use the collected data for your purpose.
• Now you can load your component.
• Steps 2, 3, and 4 in Angular Resolver are carried
  out using a piece of code called Resolver.
• The execution process between clicking the link
  and loading the component is dealt with by
  Resolver, which is an intermediate code in
  Angular development.

5
Why Should You Opt For Angular Resolvers?

• Before a forthcoming component's activatedRoute
  is active, Angular Resolvers are in charge of
  directly fetching or removing data from the
  server. Since the devoted angular developer finds
  it difficult to go on to the next component
  without the server data being retrieved, a
  spinner is not used until the data is fetched.
• Let's look at an example to help us better grasp
  it in our Angular project, we want to display an
  array of objects that were received in a
  component in an unordered list or table.
• Lets say the Angular developer is giving the
  command ngIf passing some condition and our
  business logic depends upon the length of an
  array, which will be altered once the API call is
  successful.
• As the component will be ready before we receive
  the data (the array item isn't yet with us), we
  can run into a problem.
• Route Resolver is here to the rescue. Before your
  component loads, we can retrieve the data using
  Angular's Route Resolver class. The conditional
  statements can then function properly with the
  Resolver at that point.

6
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

7

• 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.

8

• 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.

9

• This service, EmployeeResolver, will subscribe
  automatically to the getEmployees observable and
  provide the Angulars 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.

10

• To understand more details you can activate
  tracing support by passing a flag when its 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
  employees 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.

11

• After you have created the employees 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.

12

• You need to set the resolve property into the
  employees 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.

13

• Then, you can just display them into HTML without
  any ngIf statements ( ngIfemployees
  employees.length gt 0 ) because the load data
  activate will be there before the component
  rendered is loaded.

14
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
  _at_angular/router, _at_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.

15
THANK YOU
Contact Us (91) 991-308-8360 / 1 (912)
528-5566 inquiry_at_albiorixtech.com livealbiorix.te
ch For More Information Visit Us
At www.albiorixtech.com