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.

CanMatchFn

The signature of a function used as a canMatch guard on a Route.

See more...

      
      type CanMatchFn = (route: Route, segments: UrlSegment[]) => MaybeAsync<GuardResult>;
    

See also

Description

If all guards return true, navigation continues and the Router will use the Route during activation. If any guard returns false, the Route is skipped for matching and other Route configurations are processed instead.

The following example implements and uses a CanMatchFn that checks whether the current user has permission to access the team page.

      
      const canMatchTeam: CanMatchFn = (route: Route, segments: UrlSegment[]) => {
  return inject(PermissionsService).canMatch(inject(UserToken));
};

bootstrapApplication(App, {
  providers: [
    provideRouter([
      {
        path: 'team/:id',
        component: TeamComponent,
        canMatch: [canMatchTeam],
      },
    ]),
  ],
});