Cookies concent notice

This site uses cookies from Google to deliver its services and to analyze traffic.
Learn more
Skip to main content
This site is no longer updated.Head to Angular.devHome
/

This is the archived documentation for Angular v17. Please visit angular.dev to see this page for the current version of Angular.

ResolveFn

Function type definition for a data provider.

See more...

      
      type ResolveFn<T> = (route: ActivatedRouteSnapshot, state: RouterStateSnapshot) => MaybeAsync<T>;
    

See also

Description

A data provider can be used with the router to resolve data during navigation. The router waits for the data to be resolved before the route is finally activated.

The following example implements a function that retrieves the data needed to activate the requested route.

      
      interface Hero {
  name: string;
}
@Injectable()
export class HeroService {
  getHero(id: string) {
    return {name: `Superman-${id}`};
  }
}

export const heroResolver: ResolveFn<Hero> = (
  route: ActivatedRouteSnapshot,
  state: RouterStateSnapshot,
) => {
  return inject(HeroService).getHero(route.paramMap.get('id')!);
};

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'detail/:id',
        component: HeroDetailComponent,
        resolve: {hero: heroResolver},
      },
    ]),
  ],
});
    

And you can access to your resolved data from HeroComponent:

      
      @Component({template: ''})
export class HeroDetailComponent {
  constructor(private activatedRoute: ActivatedRoute) {}

  ngOnInit() {
    this.activatedRoute.data.subscribe(({hero}) => {
      // do something with your resolved data ...
    });
  }
}
    

Further information is available in the Usage Notes...

Usage notes

When both guard and resolvers are specified, the resolvers are not executed until all guards have run and succeeded. For example, consider the following route configuration:

      
      {
 path: 'base'
 canActivate: [baseGuard],
 resolve: {data: baseDataResolver}
 children: [
  {
    path: 'child',
    canActivate: [childGuard],
    component: ChildComponent,
    resolve: {childData: childDataResolver}
   }
 ]
}
    

The order of execution is: baseGuard, childGuard, baseDataResolver, childDataResolver.