Preventing Navigation Away from a Route

Learn how to use guards to prevent navigation away from a route and prefetch route data to avoid flickering in the user interface.

We'll cover the following

Guards are used not only to prevent access to a route but also to prevent navigation away from it. A guard that controls if a route can be deactivated is a function of the CanDeactivateFn type. We will learn how to use it by implementing a guard that notifies the user of pending products in the cart:

  1. Create a file named checkout.guard.ts inside the src\app folder.

  2. Add the following import statements at the top of the file:

Get hands-on with 1200+ tech skills courses.