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

No comments:

Post a Comment