{"id":695,"date":"2023-03-23T05:00:00","date_gmt":"2023-03-23T12:00:00","guid":{"rendered":"https:\/\/www.angulartraining.com\/daily-newsletter\/?p=695"},"modified":"2023-03-22T15:20:35","modified_gmt":"2023-03-22T22:20:35","slug":"canmatch-router-guard","status":"publish","type":"post","link":"https:\/\/www.angulartraining.com\/daily-newsletter\/canmatch-router-guard\/","title":{"rendered":"canMatch Router Guard"},"content":{"rendered":"\n

After introducing guards<\/a> and the most common guard functions (canActivate<\/code>, canActivateChild<\/code>, and canDeactivate<\/code>)<\/a>, we will cover one slightly different guard that can run when trying to access a route.<\/p>\n\n\n\n

canMatch<\/a><\/code> was introduced in Angular 15.1<\/a>. When canMatch<\/code> returns false<\/code>, Angular will continue looking at other routes that would match that path instead of preventing any navigation.<\/p>\n\n\n\n

Let’s consider the following example:<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

<\/p>\n\n\n\n

With the above code, both routes are configured for the \/user<\/code> path, but if the user is an admin user, they’ll land on an AdminDetails<\/code> component, and if they’re a regular user, they’ll land on a UserDetails<\/code> component. <\/p>\n\n\n\n

This approach can be helpful when working with multiple user roles that display different components.<\/p>\n","protected":false},"excerpt":{"rendered":"

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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,25],"tags":[],"class_list":["post-695","post","type-post","status-publish","format-standard","hentry","category-angular","category-routing"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\n\t\t