After introducing guards and the most common guard functions (canActivate
, canActivateChild
, and canDeactivate
), we will cover one slightly different guard that can run when trying to access a route.
canMatch
was introduced in Angular 15.1. When canMatch
returns false
, Angular will continue looking at other routes that would match that path instead of preventing any navigation.
Let’s consider the following example:
With the above code, both routes are configured for the /user
path, but if the user is an admin user, they’ll land on an AdminDetails
component, and if they’re a regular user, they’ll land on a UserDetails
component.
This approach can be helpful when working with multiple user roles that display different components.