Learning Angular/

...

/

Preventing Navigation Away from a Route

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:

import { CanDeactivateFn } from '@angular/router';
import { CartComponent } from './cart/cart.component';

  1. Create the following checkoutGuard function:

export const checkoutGuard: CanDeactivateFn<CartComponent> = () => {
  const confirmation = confirm('You have pending items in your cart. Do you want to continue?');
  return confirmation;
};

In the preceding function, we set the type of the CanDeactivateFn function to CartComponent because we want to check whether the user navigates away from this component only.

Note: In a real-world scenario, we may need to create a generic guard to support additional components.

We then use the global confirm method to display a confirmation dialog before navigating away from the CartComponent. ...