[Angular2 Router] CanDeactivate Route Guard - How To Confirm If The User Wants To Exit A Route

In this tutorial we are going to learn how we can to configure an exit guard in the Angular 2 Router. We are going to learn how to use a CanDeactivate route guard to ask the user if he really wants to exist the screen, giving the user to for example save data that was not yet persisted.

 

What 'canDeactivate' do is for example, you are editing a form, and you click other page by mistake, system will show a confirm dialog to ask whether you want to stay this page.

 

So first, add input box in hero component, when you type something and press enter, will edit the 'editing' variable to 'true', then we use this variable to control.

import {
  Component,
  OnInit,
  OnDestroy,
  ViewChild,
} from '@angular/core';
import {ActivatedRoute, Router} from "@angular/router";
import {StarWarsService} from "../heros.service";
import {Observable, Subscription} from "rxjs";

@Component({
  selector: 'app-hero',
  templateUrl: 'hero.component.html',
  styleUrls: ['hero.component.css']
})
export class HeroComponent implements OnInit, OnDestroy {

  @ViewChild('inpRef') input;

  heroId: number;
  hero: Observable<any>;
  description: string;
  querySub: Subscription;
  editing: boolean = false;

  constructor(private route: ActivatedRoute,
              private router: Router,
              private starwarService: StarWarsService) {
  }

  ngOnInit() {
    this.hero = this.route.params
     .map((p:any) => {
      this.editing = false;
      this.heroId = p.id;
      return p.id;
     })
     .switchMap( id => this.starwarService.getPersonDetail(id));


   /* // since herocomponent get init everytime, it would be better to use snapshot for proferemence
    this.heroId = this.route.snapshot.params['id'];
    this.hero = this.starwarService.getPersonDetail(this.heroId);*/

    this.querySub = this.route.queryParams.subscribe(
      param => this.description = param['description']
    );

    console.log("observers", this.route.queryParams['observers'].length)
  }

  ngOnDestroy() {
    this.querySub.unsubscribe()
  }

  saveHero(newName){
    this.editing = true;
    console.log("editing", this.editing)
  }

  prev(){
    return Number(this.heroId) - 1;
  }

  next(){
    return Number(this.heroId) + 1;
  }
}

Because now, from our hero compoennt, we can navigate to other hero component, so snapshot is not ideal for this case, we need to use router.params.

 

<div>
  <h2>{{description}}: {{(hero | async)?.name}}</h2>
  <div>
    <a [routerLink]="['/heros', prev()]">Previous</a>
    <a [routerLink]="['/heros', next()]">Next</a>
  </div>
  <div>
    <input type="text" #inpRef (keyup.enter)="saveHero(inpRef.value)">
  </div>
  <br>
  <img src="{{(hero | async)?.image}}" alt="">
  <div>
    <a [routerLink]="['/heros']">Back</a>
  </div>
</div>

 

CanDeactivateHero.ts:

import {CanDeactivate, ActivatedRouteSnapshot, RouterStateSnapshot} from "@angular/router";
import {Observable} from "rxjs";
import {HeroComponent} from "./hero/hero.component";
export class CanHeroDeactivate implements CanDeactivate<HeroComponent>{
  canDeactivate(component: HeroComponent,
                route: ActivatedRouteSnapshot,
                state: RouterStateSnapshot): Observable<boolean>|boolean {

    if(!component.editing){
      return true;
    }

    return confirm('You have unsaved message, are you sure to leave the page?')
  }

}

 

Heros.router.ts:

import {HerosComponent} from "./heros.component";
import {RouterModule} from "@angular/router";
import {HeroComponent} from "./hero/hero.component";
import {CanHeroDeactivate} from "./CanDeactiveHero.directive";
const routes = [
  {path: '', component: HerosComponent},
  {path: ':id', component: HeroComponent, canDeactivate: [CanHeroDeactivate]},
];
export default RouterModule.forChild(routes)

 

heros.module.ts:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HerosComponent } from './heros.component';
import herosRoutes from './heros.routes';
import {HeroComponent} from "./hero/hero.component";
import {StarWarsService} from "./heros.service";
import {RouterModule} from "@angular/router";
import {CanHeroDeactivate} from "./CanDeactiveHero.directive";

@NgModule({
  imports: [
    CommonModule,
    herosRoutes
  ],
  declarations: [HerosComponent, HeroComponent],
  providers: [StarWarsService, CanHeroDeactivate]
})
export default class HerosModule { }

 

Github