Restrict ng-bootstrap modal from closing if clicked outside or ESC button

Question

I am using ng-bootstrap to open a modal for my angular2 project. The modal is getting dissolved if I click outside and also ESC button. I want to restrict these two behavior. Below is my code to open the modal

import { NgbModal, NgbModalOptions } from '@ng-bootstrap/ng-bootstrap'; ..... modalOption: NgbModalOptions = null; constructor( private modalService: NgbModal, .... } .... //the method I am using to open a modal openAddModal() {     this.modalOption.backdrop = 'static';     this.modalOption.keyboard = false;     const modalRef =  this.modalService.open(PremiumProtectionComponent,this.modalOption);     ..... } 

PremiumProtectionComponent is the ts file for the modal.

Below is the HTML where I have called the method

<a (click)="openAddModal()">Click to open modal</a>

Can anybody suggest me the correct way to achieve this behavior. Thanks in advance

Answer 1

You need to set backdrop and keyboard properties on modalOptions object, not null:

modalOption: NgbModalOptions = {}; // not null!  // ...  openAddModal() {     this.modalOption.backdrop = 'static';     this.modalOption.keyboard = false;     const modalRef = this.modalService.open(PremiumProtectionComponent,this.modalOption); }