Angular Router: Using Route Guards

In this article, we will be covering Route Guards and different types of route guards. Angular router’s navigation guards allow you to grant or remove access to certain parts of navigation.

Here are the below types of route guards available:

1. CanActivate: It is an interface a class can implement to decide if a route can be activated or not. If all guards return true, then navigation will continue. Otherwise, navigation will be cancelled.

2. CanActivateChild: It is an interface that a class can implement to decide if a child route can be activated or not. If all guards return true, then navigation will continue. Otherwise, navigation will be cancelled.

3. CanDeactivate: It is an interface that a class can implement to decide if a child route can be deactivated. If all guards return true, then navigation will continue. Otherwise, navigation will be cancelled.

4. Resolve: It is an interface that a class can implement to be a data provider. The interface defines a resolve() method that will be invoked when the navigation starts. The router will then wait for the data to be resolved before the route is finally activated

5. CanLoad: It is an interface that a class can implement to deciding if a child can be loaded. It is specifically useful to implement lazy loading.

You can use below command to create guard

ng generate guard guardName

This command asks which interfaces you would like to implement and depending upon that, angular-cli will create a TypeScript file with basic code structure.

Below is a code snippet that is generated when run above command.

xxxxxxxxxx

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';

import { Injectable } from '@angular/core'; import { Observable } from 'rxjs'; @Injectable(

  {   providedIn: 'root' }

)

export class ActivateGuard implements CanActivate {  

 canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot):     Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {   return true;  

  } 

} 

Happy Learning!!!