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.

CanMatch

Interface that a class can implement to be a guard deciding if a Route can be matched. 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.

See more...

Deprecated: Class-based Route guards are deprecated in favor of functional guards. An injectable class can be used as a functional guard using the inject function: canMatch: [() => inject(myGuard).canMatch()].

      
      interface CanMatch {
canMatch(route: Route, segments: UrlSegment[]): MaybeAsync<GuardResult> }

See also

Description

The following example implements a CanMatch function that decides whether the current user has permission to access the users page.

      
      class UserToken {}
class Permissions {
  canAccess(user: UserToken, route: Route, segments: UrlSegment[]): boolean {
    return true;
  }
}

@Injectable()
class CanMatchTeamSection implements CanMatch {
  constructor(private permissions: Permissions, private currentUser: UserToken) {}

  canMatch(route: Route, segments: UrlSegment[]): Observable<boolean>|Promise<boolean>|boolean {
    return this.permissions.canAccess(this.currentUser, route, segments);
  }
}
    

Here, the defined guard function is provided as part of the Route object in the router configuration:

      
      @NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'team/:id',
        component: TeamComponent,
        loadChildren: () => import('./team').then(mod => mod.TeamModule),
        canMatch: [CanMatchTeamSection]
      },
      {
        path: '**',
        component: NotFoundComponent
      }
    ])
  ],
  providers: [CanMatchTeamSection, UserToken, Permissions]
})
class AppModule {}
    

If the CanMatchTeamSection were to return false, the router would continue navigating to the team/:id URL, but would load the NotFoundComponent because the Route for 'team/:id' could not be used for a URL match but the catch-all ** Route did instead.

Methods

      
      canMatch(route: Route, segments: UrlSegment[]): MaybeAsync<GuardResult>
    
Parameters
route Route
segments UrlSegment[]
Returns

MaybeAsync<GuardResult>