[Solved] Which of the following is the correct syntax to apply a canDeactivate guard to a route in Angular? - Ans: { path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] } | Angular

Angular - Routing

Which of the following is the correct syntax to apply a canDeactivate guard to a route in Angular?

A{ path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] }

B{ path: 'edit', component: EditComponent, canLoad: [LoadGuard] }

C{ path: 'edit', component: EditComponent, canActivate: [AuthGuard] }

D{ path: 'edit', component: EditComponent, canActivateChild: [ChildGuard] }

Step-by-Step Solution

Solution:

Step 1: Identify the guard type for leaving routes
canDeactivate is used to check if navigation away from a route is allowed.
Step 2: Match syntax with canDeactivate
The correct syntax uses canDeactivate: [GuardName] inside the route object.
Final Answer:
{ path: 'edit', component: EditComponent, canDeactivate: [UnsavedChangesGuard] } -> Option A
Quick Check:
canDeactivate syntax = canDeactivate: [Guard] [OK]

Quick Trick: Use canDeactivate: [Guard] to protect leaving a route [OK]

Common Mistakes:

MISTAKES

Master "Routing" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Which of the following is the correct syntax to apply a canDeactivate guard to a route in Angular?