CODEWITHSUNDEEP
bootstrap-modalangular5ng-bootstrap
Anonymous
Anonymous

Reputation: 143

Bootstrap modal window not closing on route change in angular 5

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?

Upvotes: 12

Views: 9730

Answers (6)

Federico Navarrete
Federico Navarrete

Reputation: 3274

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.

Upvotes: 1

Maxime
Maxime

Reputation: 11

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();
      }
    });
  }

}

Upvotes: -1

Nouran Mahmoud
Nouran Mahmoud

Reputation: 85

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

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

  }
});

Upvotes: -1

Derrick Miller
Derrick Miller

Reputation: 1951

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();        

      }

    });

  }

}

Upvotes: 12

Anonymous
Anonymous

Reputation: 143

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();
   }
}

Upvotes: 0

Oleksandr Oleksiv
Oleksandr Oleksiv

Reputation: 688

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()
}

Upvotes: 5

Related Questions