Angular resolve property in the router

Hello Amigos, Welcome to my blog. Today’s topic is a resolve property in the angular router.

Somany times we face this issue like our HTML gets rendered before our data is loaded. Due to this sometimes we may have got n error like ‘undefined data property’. So, we will talk about this issue’s solution today.

While creating routing in your application each route has an attribute called resolve. This property is very useful when you want your data preloaded with your DOM or HTML.

Now to achieve this, use the following steps,

1.Create a service let’s say I named as user.data.resolve.service.ts and add a below code

import {Injectable} from '@angular/core';
import {Resolve, ActivatedRouteSnapshot} from '@angular/router';
import {Observable} from 'rxjs';
import {UserDataService} from './user-data.service';
import {IPost} from './IPost';

@Injectable()
export class UserPostsResolve implements Resolve<IPost[]> {
  constructor(private userDataService: UserDataService) {
  }

  resolve(route: ActivatedRouteSnapshot): Observable<IPost[]> {
    return this.userDataService.getPosts();
  }
}

Let me explain,

• Very first, after creating service we will need to implement an interface called Resolve (this is an angular inbuilt interface).IPost is my model for user-data which is eventually a return type of my resolve method.

• This resolve interface has only one method named resolve which we will need to implement in our service. For more information declaration of resolve, the method is as below

resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<T> | Promise<T> | T;

• Now. if you closely observed it takes two parameters as an ActivatedRouteSnapshot or RouterStateSnapshot. We will pass ActivatedRouteSnapshot in our case. And it returns either Observable with any data or promise with any data or only data.

• That’s what our resolve function is doing now. It is calling one service which has get method to get data

2.Now we have to use this user.data.resolve.service.ts file in our component(in my case user.data.component.ts) as we just import a service. Take a look at the below code.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { IPost } from './IPost';
@Component({
  selector: 'app-user-data',
  templateUrl: './user-data.component.html',
  styleUrls: ['./user-data.component.css']
})

export class UserDataComponent implements OnInit {
  userPosts: IPost[] = [];

  constructor(private route: ActivatedRoute ) {
  }

  ngOnInit() {
    this.userPosts = this.route.snapshot.data.userPostsResolve;
  }

}

Let me explain, In my case, I’m loading my data on ngOnInit.We will be using a snapshot property of the ActivatedRoute interface of a router. This interface provides us data property where our static and resolved data is kept.

3.And the last step, in your routing module the route you want data preloaded use resolve property as below

const routes: Routes = [
  { path: 'user', component: UserDataComponent, resolve : {userPostsResolve : UserPostsResolve} }
];where , UserPostsResolve is the resolver service (user.data.resolve.service.ts)Just keep in mind the key we defined in resolve propery , should be same as we used in ngOninit in component this.route.snapshot.data.userPostsResolve;

Now you might think about how does this work, I will explain to you.

• Let’s say you have /user route where we showed all user information.

• As soon as we hit this URL, angular looks for resolve property, if it is present then it goes the service which is provided in it. It grabs the data defined there and it puts into data property of ActivatedRoute interface of router class.

• After grabbing all data now it actually goes to that router and renders everything.Now as before rendering the HTML DOM we have all data that is necessary for that route, hence it works fine.