Route guards (canActivate, canDeactivate) in Angular - Step-by-Step Execution

Concept Flow - Route guards (canActivate, canDeactivate)

User tries to navigate to a route

↓

canActivate guard runs?

No→Navigation blocked

Yes↓

Route component loads

↓

User tries to leave route

↓

canDeactivate guard runs?

No→Navigation blocked

Yes↓

Navigation allowed to next route

When navigating, Angular first checks canActivate to allow entry. When leaving, it checks canDeactivate to allow exit.

Execution Sample

Angular

canActivate(route, state) {
  return confirm('Enter this page?');
}

canDeactivate(component) {
  return confirm('Leave this page?');
}

Simple guards ask user confirmation before entering or leaving a route.

Execution Table

Step	Trigger	Guard Type	User Response	Guard Result	Navigation Outcome
1	User clicks link to /dashboard	canActivate	User clicks OK	true	Navigation allowed, component loads
2	User clicks link to /dashboard	canActivate	User clicks Cancel	false	Navigation blocked, stays on current page
3	User tries to leave /dashboard	canDeactivate	User clicks OK	true	Navigation allowed to next route
4	User tries to leave /dashboard	canDeactivate	User clicks Cancel	false	Navigation blocked, stays on /dashboard

💡 Navigation stops if guard returns false, otherwise continues.

Variable Tracker

Variable	Start	After Step 1	After Step 3	Final
canActivate result	undefined	true or false (based on user)	N/A	true or false
canDeactivate result	undefined	N/A	true or false (based on user)	true or false

Key Moments - 3 Insights

Why does navigation stop even if the user clicks Cancel on canActivate?

Because canActivate returned false (see execution_table row 2), Angular blocks navigation before loading the route.

What happens if canDeactivate returns false when leaving a route?

Navigation is blocked and the user stays on the current route (see execution_table row 4).

Does canDeactivate run before or after the component loads?

It runs when the user tries to leave the route, after the component has loaded (see concept_flow).

Visual Quiz - 3 Questions

Look at the execution_table, what is the navigation outcome if canActivate returns false?

A Navigation allowed, component loads

B Navigation blocked, stays on current page

C Navigation allowed but component does not load

D Navigation blocked but component loads

💡 Hint

Check execution_table row 2 under Navigation Outcome

At which step does canDeactivate guard run?

A Step 1

B Step 2

C Step 3

D Step 4

💡 Hint

See execution_table rows 3 and 4 for canDeactivate triggers

If user always clicks OK, what will be the final value of canActivate and canDeactivate results?

A canActivate: true, canDeactivate: true

B canActivate: true, canDeactivate: false

C canActivate: false, canDeactivate: false

D canActivate: false, canDeactivate: true

💡 Hint

Check variable_tracker values after user clicks OK in steps 1 and 3

Concept Snapshot

Route guards control navigation in Angular.
canActivate runs before entering a route.
canDeactivate runs before leaving a route.
Return true to allow navigation, false to block.
Commonly used for login checks and unsaved changes warnings.

Full Transcript

Route guards in Angular help control if a user can enter or leave a page. The canActivate guard runs when the user tries to go to a route. If it returns true, navigation continues and the page loads. If false, navigation stops. The canDeactivate guard runs when the user tries to leave a route. If it returns true, navigation continues to the next page. If false, the user stays on the current page. Guards often ask for user confirmation. This visual shows steps where guards run, user responses, and navigation results. It helps beginners see how guards block or allow navigation based on conditions.