Guard

[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

ng g guard fleet/leave

[web-dave]

leave.guard.ts

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

[web-dave]

fleet-routing.module.ts

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

[web-dave]

vehicle-new.component.ts

// this.saved needs to be set on Save
  isSaved() {
    return this.saved || !this.form.dirty;
  }

[web-dave]

NEXT