CanDeactivate route guards

ng g guard guards/contact-form

export class ContactFormGuard implements CanDeactivate<unknown> {
  canDeactivate(
    component: unknown,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | 
        Promise<boolean | UrlTree> | boolean | UrlTree {
    return true;
  }
}

export class ContactFormGuard implements CanDeactivate<ContactComponent>

{ path: 'contact', canDeactivate: [ContactFormGuard], component: ContactComponent },

firstName: string = '';
lastName: string = '';
message: string = '';
email: string = '';

canExit(){
    if(this.firstName || this.lastName || this.message || this.email){
      return confirm('You have unsaved changes. Do you want to exit.');
    } else {
      return true;
    }
}

canDeactivate(
    component: ContactComponent,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState?: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {

    return component.canExit();
}

export interface IDiactivateComponent{
  canExit: () => Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree;
}

export class ContactFormGuard implements CanDeactivate<IDiactivateComponent>

export class ContactComponent implements IDiactivateComponent{