0Pricing
Angular Academy · Lesson

Functional Route Guards

Protect routes with functional guards.

What are route guards

Guards decide whether navigation may proceed: protect routes behind auth, confirm before leaving a form, or restrict by role. Modern Angular uses functional guards — plain functions, no classes.

CanActivateFn

A CanActivateFn returns true to allow, false to block, a UrlTree to redirect, or an observable/promise of those.

import { CanActivateFn } from '@angular/router';
import { inject } from '@angular/core';

export const authGuard: CanActivateFn = () => {
  const auth = inject(AuthService);
  return auth.isLoggedIn();
};

All lessons in this course

  1. Route Parameters and Query Params
  2. Resolvers and Route Data
  3. Functional Route Guards
  4. Router Events and Navigation
← Back to Angular Academy