Guards

[web-dave]

• Generate a leave guard
• implement it as a canDeactivate Guard
• Provide it in your BooksModule
• Add it to the new route
• You need a helper to check status of this Component

[web-dave]

generate

  ng g guard books/shared/leave

[web-dave]

leave.guard.ts

import { BookNewComponent } from './../book-new/book-new.component';
import { Injectable } from '@angular/core';
import { CanDeactivate } from '@angular/router';

@Injectable()
export class LeaveGuard implements CanDeactivate<BookNewComponent> {
 canDeactivate(target: BookNewComponent) {
   if (!target.isSaved()) {
     return window.confirm('Do you really want to cancel?');
   } else {
     return true;
   }
 }
}

[web-dave]

books-routing.module.ts

    {
      path: 'new',
      component: BookNewComponent,
      canDeactivate: [LeaveGuard]
    },

[web-dave]

book-new.component.ts

  isSaved() {
    return this.saved || !this.form.dirty;
  }