Route guards (canActivate, canDeactivate) in Angular - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the canActivate guard in Angular routing?

The canActivate guard controls if a route can be entered. It checks conditions before allowing navigation to a route, like user authentication.

beginner

What does the canDeactivate guard do in Angular?

The canDeactivate guard checks if it is okay to leave the current route. It can prevent navigation away, for example, if a form has unsaved changes.

intermediate

How do you implement a canActivate guard in Angular?

Create a service that implements the CanActivate interface. Add a canActivate() method that returns true or false (or an Observable/Promise of those). Then add this guard to the route's canActivate array.

beginner

When would you use canDeactivate guard in a real app?

Use canDeactivate to warn users about unsaved changes before leaving a form or page. It helps avoid losing data by accident.

intermediate

What types of values can canActivate and canDeactivate return?

They can return a boolean, an Observable<boolean>, or a Promise<boolean>. This allows synchronous or asynchronous checks before navigation.

What does the canActivate guard control?

A Whether a route can be entered

B Whether a route can be left

C How a route is styled

D How data is fetched for a route

canActivate controls if navigation to a route is allowed.

Which interface should a service implement to act as a canDeactivate guard?

A CanActivate

B Resolve

C CanDeactivate

D CanLoad

The CanDeactivate interface is used for guards that check if a route can be exited.

What can canActivate return to allow asynchronous checks?

A Observable<boolean> or Promise<boolean>

B Only string

C Number

D Only boolean

It can return an Observable or Promise of boolean to handle async logic.

When is canDeactivate guard typically used?

A Before entering a route

B Before leaving a route

C To fetch data

D To style components

canDeactivate runs before leaving a route to confirm navigation.

How do you add a canActivate guard to a route?

A Add it to the module imports

B Add it to the route's <code>canDeactivate</code> array

C Add it to the component's decorator

D Add it to the route's <code>canActivate</code> array

Guards are added to the route configuration under canActivate.

Explain how canActivate and canDeactivate guards help control navigation in Angular apps.

Think about when you want to stop users from going to or leaving a page.

Describe the steps to create and use a canActivate guard in an Angular application.

Focus on the service, method, return type, and route setup.