Data resolver

If you want to process or retrieve data before activating a route, you can use a data resolver.

Suppose we have a resolver function that needs to process some data before activiting /hello. The function below just returns Bonjour:

import { ActivatedRouteSnapshot, ResolveFn, RouterStateSnapshot } from "@angular/router";

export const helloResolver: ResolveFn<string | null> = async (
	route: ActivatedRouteSnapshot,
	state: RouterStateSnapshot,
) => {
	return "Bonjour";
};

That function is declared in resolve part of the route hello. Note that the value returned by the resolver function is assigned to greetings.

export const routes: Routes = [
	{
		path: "hello",
		component: HelloComponent,
		resolve: {
			greetings: helloResolver,
		},
	},
];

In the HelloComponent, you can access the data from the resolver.

export class HelloComponent implements OnInit {
	route = inject(ActivatedRoute);

	ngOnInit() {
		console.log("greetings:", this.route.snapshot.data["greetings"]);
	}
}