Popup Modal Dialog from Route Guard

Question

From blog post protecting routes using guards in angular we can pop a message when a user cannot access a route. :

import { CanDeactivate } from '@angular/router';
import { CanDeactivateComponent } from './app/can-deactivate';

export class ConfirmDeactivateGuard implements CanDeactivate<CanDeactivateComponent> {

  canDeactivate(target: CanDeactivateComponent) {
    if(target.hasChanges()){
        return window.confirm('Do you really want to cancel?');
    }
    return true;
  }
}

I would like to show a modal dialog using ngx-bootstrap to allow the user to login.

I have managed to get some simple code loading the modal from the main app (eg not a child view from my app.component.ts), such as

showloginModal() {
  this.loginModal.show();
}

the modal is loaded from another HTML file with (I include the core login code with the selector app-login

<div class="modal-body">
  <app-login  #loginModal> </app-login>
</div>

edit I have just had a look at Angular2 DialogService – Exploring Bootstrap and that looks like it does the job but it's for bootstrap4

you cannot do it that way. instead you should handle it in the app.component — Aravind, May 05 '17 at 18:22
in simple terms, I need to pop a dialog from a service, I have just added this link that does it with bootstrap4 https://long2know.com/2017/01/angular2-dialogservice-exploring-bootstrap-part-2/ but not from a route guard. But I presume (note *presume*) that if it will work from a route guard it will work from a service) — Steve Drake, May 05 '17 at 18:24
another approach might be to use a global variable and display the dialog based on that. — Steve Drake, May 05 '17 at 18:26
yes. that is `ngbootstrap` you can use from route guard as shown in that link. what is the problem now? — Aravind, May 05 '17 at 18:27
My project is on bootstrap 3 so that blog demo won't work, BUT I am going to move to bootstrap 4 and try the method in blog. — Steve Drake, May 06 '17 at 07:45
here is my solution to a similar problem: https://stackoverflow.com/questions/46433195/angular-use-modal-dialog-in-candeactivate-guard-service-for-unsubmitted-changes — Francesco Borzi, Sep 27 '17 at 15:01

Steve Drake · Answer 1 · 2017-05-08T16:00:14.997

You cannot do this with ngx-bootstrap but you can with @ng-bootstrap/ng-bootstrap.

Example usage from a Service

this.dialogService.show("Logged Out","You are out of here");

Example usage from a route guard

async canActivate() {
  if (!this.auth.loggedIn()) {
    await this.loginDialogService.confirm();
    return this.auth.loggedIn();
  }
  return true;
}

Source code for the service.

dialog.component.ts

import { Injectable }    from '@angular/core';
import {Component} from '@angular/core';
import {NgbModal, ModalDismissReasons,NgbActiveModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-dialog',
  templateUrl: './dialog.component.html',
  styleUrls: ['./dialog.component.css']
})
export class DialogComponent   {
    constructor(private modalService: NgbModal,public activeModal: NgbActiveModal) {}
    public title: string;
    public message: string;
}

@Injectable()
export class DialogService {  
  constructor(private modalService: NgbModal) {}

  public show(title: string, message:string) {
    const modalRef = this.modalService.open(DialogComponent);
    modalRef.componentInstance.title = title;
    modalRef.componentInstance.message = message;
    return modalRef.result;
  }
}

dialog.component.html

<div class="modal-header">
  <h5 class="modal-title" id="exampleModalLabel">{{title}}</h5>
  <button type="button" class="close" data-dismiss="modal" aria-label="Close" (click)="activeModal.close()">
          <span aria-hidden="true">&times;</span>
        </button>
</div>
<div class="modal-body">
  {{message}}
</div>
<div class="modal-footer">
  <button type="button" class="btn btn-primary" data-dismiss="modal" (click)="activeModal.close()">Ok</button>
</div>

You also need to make it an entryComponent add

entryComponents: [DialogComponent,LoginDialogComponent]

to you @NgModule

Credit to long2know good blog to start with.

will it work with bootstrap 3.not worried abiut the css..but will the functionality work? — Karan Garg, Aug 02 '17 at 09:03
https://github.com/ng-bootstrap/ng-bootstrap is for bootstrap 4, but you could code something up for bs3 — Steve Drake, Aug 02 '17 at 11:15
any other modal dialog that supports promise method..trying to use with can activate guard something similar to confirm of javascript? — Karan Garg, Aug 02 '17 at 11:18
Quick update from the future, if you're using Angular 9+ you don't need to add it to the `entryComponents` array because it is [deprecated](https://angular.io/guide/entry-components#the-entrycomponents-array). — Brad K, Jan 08 '21 at 00:25

Popup Modal Dialog from Route Guard

1 Answers1