Angular 15+ New Way of Functional Router Guards

🔸In Angular v14.2, angular team announced New Router API for standalone.

🔸Functional router guards in Angular allow you to define guards using functions instead of classes.

🔸This can be particularly useful when you want to keep your code concise and avoid creating separate guard classes. Here's how you can use functional router guards in Angular:

🔸Before Angular 15, We need to do Implement Guard with CanActivate and to do the logic inside the guard as class.

Angular 15 below.


export class AuthGuard implements CanActivate {

  constructor(private authServices: AuthService, private router: Router, private alertify: AlertifyService) {}

  canActivate(): Observable | Promise | boolean {
    if (this.authServices.loggedIn()) {
      return true;

    this.alertify.error('You need to be loggin to acces this area');
    return false;

Activate in guard


In Angular 15+ , configure inline like below or more logic use it as function.

1️⃣ Inline: Here functional guards can still inject dependencies with inject from @angular/core :

const route = {
  path: ‘admin’,
  canActivate: [() => inject(AuthService).isLoggedIn()]

2️⃣ . you can use it as function like below .

    import { inject } from "@angular/core";
import { ActivatedRouteSnapshot, CanActivateChildFn, CanActivateFn, Router, RouterStateSnapshot } from "@angular/router";
import { AuthService } from "../service/auth.service";

// add the guard as function and configure it in the related routes 

export const AdminauthGuard: CanActivateFn = (
  route: ActivatedRouteSnapshot,

  state: RouterStateSnapshot
) => {
  const auth = inject(AuthService);
   const router = inject( Router)
    alert('authentication allowed');
    return true
  alert("Authentication retsricted");
  return false;

Advantages of functional Guards.

✅ Functional route guards require just a single function, and can be written in a separate file, or created inline for a route if needed.

✅Functional router guards with inject() are lightweight, ergonomic, and more composable than class-based guards.

In this example , if we need to check simple logic , we need to write class based guards which implements canActivate.
  @Injectable({providedIn: 'root'})
  export class LoggedInGuard implements CanActivate {
    constructor(private loginService: LoginService) {}
    canActivate() {
      return this.loginService.isLoggedIn();
  const route = {
    path: 'admin',
    canActivate: [LoggedInGuard]