The Angular 10 Router provides a resolve property that takes a route resolver and allows your application to fetch data before navigating to the route (i.e resolving route data).

How to Create an Angular 10 Route Resolver

You can create a route resolver in Angular 10 and previous versions by implementing the Resolve interface. For example,this a route resolver:

import { Injectable } from '@angular/core';
import { APIService } from './api.service';

import { Resolve } from '@angular/router';

@Injectable()
export class APIResolver implements Resolve<any> {
  constructor(private apiService: APIService) {}

  resolve() {
    return this.apiService.getItems();
  }
}

In the example, we assume we have already created an APIService which has a getItems() method that fetches data from a remote API endpoint.

#angular