Angular2 prevent ngboopstrap dialogs to close when clicking outside

The default behaviour for bootstrap modal dialogs is to close when you click outside the dialog however this is not always the desired behaviour

When using Bootstrap 4 without the angular wrapper you need to add the data-backdrop='static' and data-keyboard="false" to the button in order to achieve this :


If you are using the angular wrapper for bootstrap (and assuming you have your project already configured you can achieve this like so :

export class MyComponent implements OnInit {

    constructor(private modalService: NgbModal) {}

     showDialog(): void {
         this.modalService.open(ModalDialog,{size: "lg",backdrop: 'static', keyboard: false});
    }
}


And simply calling the showDialog() method from your template should do the trick

Popular posts from this blog

Multi-hop ssh tunnel - howto : Creating a SSH tunnel with port forwarding between multiple hosts

Spring boot and spring data jpa tutorial - A sample application using spring 4.0 spring boot and JPA (part 2/2)

Maven build number, versioning your projects builds automatically