1

I would like to display a popup that warns a user if he/she tries to navigate away from a form which has unsaved changes. I would like to make use of ngx-sweetalert2 component since most of my app displays alerts in similar fashion. However, I couldn't find any documentation or tutorials online that explain this. Even though there is similar type of request on Stackoverflow (Angular use modal dialog in canDeactivate Guard service for unsubmitted changes (Form dirty)), which uses bootstrap modal. Perhaps someone can assist me with integrating ngx-sweetalert2 instead of ngx-bootstrap from the solution provided in the included link. I would really appreciate that.

Thanks

@BizzyBob Thank you for reply. Yes, I do currently have the guard working with a simple confirm dialog. Please see my implementation in the code provided: 

// Guard.ts
import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router, CanDeactivate } from '@angular/router';
import { Observable } from 'rxjs/Observable';

export interface ComponentCanDeactivate {
    canDeactivate: () => boolean | Observable<boolean>;
}

@Injectable({providedIn: 'root'})
export class PendingChangesGuard implements CanDeactivate<ComponentCanDeactivate> {
    canDeactivate(component: ComponentCanDeactivate): boolean | Observable<boolean> {
    // if there are no pending changes, just allow deactivation; else confirm first
    return component.canDeactivate() ?
        true :
        // NOTE: this warning message will only be shown when navigating elsewhere within your angular app;
        // when navigating away from your angular app, the browser will show a generic warning message
        // see http://stackoverflow.com/a/42207299/7307355
        confirm('WARNING: You have unsaved changes. Press Cancel to go back and save these changes, or OK to lose these changes.');
    }
}

// Component.ts

import { ComponentCanDeactivate } from '../../auth/guards/auth.guard';
import { Observable } from 'rxjs/Observable';
// @HostListener allows us to also guard against browser refresh, close, etc.
  @HostListener('window:beforeunload')
  canDeactivate(): Observable<boolean> | boolean {
    if (this.officeForm.dirty && this.officeForm.touched) {
      return false;
    } else {
      return true;
    }
  }
  
// Routing.ts
import { Routes } from '@angular/router';
import { OfficesComponent } from './offices.component';
import { RegionalOfficesComponent } from './regional-offices/regional-offices.component';
import { OfficeDetailsComponent } from './office-details/office-details.component';
import { OfficeEditComponent } from './office-edit/office-edit.component';
import { AuthGuard, PendingChangesGuard } from '../auth/guards/auth.guard';

export const OfficeRoutes: Routes = [
    { path: '', component: OfficesComponent },
    { path: 'add', component: OfficeEditComponent, canDeactivate: [PendingChangesGuard] },
    { path: ':regionCode', component: RegionalOfficesComponent },
    { path: ':regionCode/:id', component: OfficeDetailsComponent },
    { path: ':regionCode/edit/:id', component: OfficeEditComponent, canDeactivate: [PendingChangesGuard]}
];
Tejpartap Gill
  • 11
  • 5
  • ngx-sweetalert2 looks like it has exclusive directive/component functionality. In theory, you could have a subject in your app.service. in your app.component, subscribe to it and launch your click handler for the ngx-sweetalert2 upon new subscription value. then on your deactivate guard, do appService.subject.next(params) and it should work – francojay Mar 03 '19 at 16:16
  • What have you tried so far? Do you currently have the guard working? I'd suggest getting it working first with no pop up. Then, using a simple `window.alert()`. Once you get that going it should be easy to implement a fancier modal such as the ngx-sweetalert. If you run into problems, post your code so we can help. – BizzyBob Mar 03 '19 at 17:34
  • @BizzyBob. Please see the edit I made to original post with the code snippet. I just pasted the javascript. Thanks. – Tejpartap Gill Mar 03 '19 at 18:04
  • @francojay. Thanks for you response. I am not very well versed in the use of Subjects. Is it possible you could provide a bit more details regarding this, hopefully with an example based on the snippet I provided in my original post. It will be much appreciated. Thanks – Tejpartap Gill Mar 03 '19 at 18:37

0 Answers0