Guards

[web-dave]

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

[web-dave]

generate (DEPRECATED!!!)

  ng g guard books/shared/leave

[web-dave]

leave.guard.ts

import { BookNewComponent } from './../book-new/book-new.component';

import { CanDeactivateFn } from '@angular/router';

@Injectable()
export const leaveGuard: CanDeactivateFn<BookNewComponent> = (target: BookNewComponent) => {
   if (!target.isSaved()) {
     return window.confirm('Do you really want to cancel?');
   } else {
     return true;
   }
 }

[web-dave]

books.module.ts (DEPRECATED!!!)

 import ...

  @NgModule({
  imports: [...],
  exports: [],
  declarations: [...],
  providers: [LeaveGuard]
  })
  export class BooksModule { }

[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;
  }

[web-dave]

PreloadingStrategy