Angular – Route Guards

import {Injectable } from '@angular/core';
import {CanDeactivate } from '@angular/router';

@Injectable()
export class PetGuard implements CanDeactivate {

  canDeactivate(component: PetComponent): Boolean {
     if(component.form.dirty) {
        return confirm('Navigate away? Your changes will be lost');
     }
     return true;
  }

}

Remember:

  • import the guard.. import { PetGuard } from ‘./pet-guard.service’;
  • register the guard as a provider
  • tie the guard to the route as seen in routing

Leave a Reply

Your email address will not be published. Required fields are marked *