Bootstrap modal window not closing on route change in angular 5

Question

On using the "@ng-bootstrap/ng-bootstrap": "1.0.0-beta.6" version in my Angular 5 application, everything looks fine. But if I have a button in the modal window which triggers route change, the modal window is not closed even after the route change.

On my little research, I found something in previous bootstrap versions on click of the modal window we use to see the modal window related code inside the specific component and on route change as the component gets destroyed, even the modal window use to be destroyed. But in the current version, I am seeing the modal window-related code almost at the end of the body tag which doesn't get affected with route change.

Is there any way to close the modal on route change?

score 12 · Accepted Answer · answered Nov 11 '18 at 01:01

Version 4 of ng-bootstrap now includes a dismissAll method that closes all open modals. It may also be present in versions as early as 3.1, but I'm not completely sure about that.

You can call it from app.component.ts on every route change, using this syntax:

import { Router, NavigationEnd } from '@angular/router';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

export class AppComponent {

  constructor(router: Router, modalService: NgbModal) { }

  ngOnInit() 
  {

    this.router.events.subscribe(event => {

      if (event instanceof NavigationEnd) {

        // close all open modals
        this.modalService.dismissAll();        

      }

    });

  }

}

Your idea of using Navigation events to close modals helped me, thanks. In my Angular 4 app, which uses some vanilla (not ng-) Bootstrap modals in it, i had to make sure modals were closed on any navigation event, and i found the `NavigationStart` event came in more handy rather than `NavigationEnd`. I ended up closing modals like the following `if (event instanceof NavigationStart) { $('#settingsModal').modal('hide'); $('#reviewModal').modal('hide'); }` — oomer, Feb 04 '22 at 13:45

score 5 · Answer 2 · answered Mar 28 '18 at 08:00

5

Try to define ngOnDestroy on your parent component and check if modal is open or not when route change.

modalWindow = null;
openModal(){
 this.modalWindow.open('YourComponent')
}

ngOnDestroy(){
 if(this.modalWindow !== null) this.modalWindow.close()
}

answered Mar 28 '18 at 08:00

Oleksandr Oleksiv

638
1
6
10

Thanks Oleksandr Oleksiv. I have fixed the issue long back which looks similar to yours but forgot to update. – Anonymous Mar 30 '18 at 06:00

Federico Navarrete · Answer 3 · 2022-01-08T09:19:57.750

1

An alternative. On the parent declare the modal service in its constructor:

constructor(private modalService: NgbModal) { }

Next, on the ngOnDestroy, you dismiss all modals:

ngOnDestroy() {
    this.modalService.dismissAll();
}

In this way, you don't check in the ngOnInit from another component if there is anything missing.

edited Jan 08 '22 at 09:19

answered Jan 08 '22 at 08:51

Federico Navarrete

3,069
5
41
76

score 0 · Answer 4 · edited Mar 30 '18 at 06:18

I have updated my code something like this to be able to handle the modal windows from anywhere in the application.

In Component:

import {SharedService} from './shared.service.ts';
constructor(private _sharedService: SharedService) {}
this._sharedService.openModal(content);
ngOnDestroy() {
   this._sharedService.closeModal();
}

In Shared Service:

modalRef: any;
openModal(modalname) {
this.modalRef = this.modalService.open(modalname);
}
closeModal() {
   if (this.modalRef) {
       this.modalRef.close();
   }
}

score 0 · Answer 5 · answered Mar 17 '19 at 09:12

0

If u have Modal HTML inside your component try this in comp. constructor :

router.events.subscribe(val => {
  if (val) {
    $("#Model").modal("hide");
    $("#Model").hide();

  }
});

answered Mar 17 '19 at 09:12

Nouran Mahmoud

77
1
3

score -1 · Answer 6 · answered Oct 28 '20 at 10:22

Here is the full code

import {Component, OnInit} from '@angular/core';
import {Router, NavigationEnd } from '@angular/router';
import {NgbModal} from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  router: Router;
  modalService: NgbModal;

  constructor(router: Router, modalService: NgbModal) {
    this.router = router;
    this.modalService = modalService;
  }

  ngOnInit() {
    this.router.events.subscribe(event => {
      if (event instanceof NavigationEnd) {
        // close all open modals
        this.modalService.dismissAll();
      }
    });
  }

}

Bootstrap modal window not closing on route change in angular 5

6 Answers6