Create a Guard

[web-dave]

• Create a leave guard Function
• Implement it as a CanDeactivateFn

leave.guard.ts

```ts import { BookNewComponent } from './../book-new/book-new.component'; import { CanDeactivateFn } from '@angular/router'; export const leaveGuard: CanDeactivateFn = (target: BookNewComponent) => { if (!target.isSaved()) { return window.confirm('Do you really want to cancel?'); } else { return true; } } ```

• Add it to the new route

book.routes.ts

```ts { path: 'new', component: BookNewComponent, canDeactivate: [leaveGuard] } ```

• You need a helper to check status of this Component

book-new.component.ts

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

[web-dave]

NEXT