NgbModal closes when i click outside despide defining backdrop to static

Question

Im using NgbModal to open a template the following way:

this.modalReference = this.modalService.open(template, MODAL_OPTIONS);

MODAL_OPTIONS is defined the following way:

export const MODAL_OPTIONS: NgbModalOptions = {backdrop: 'static', keyboard: false};

The documentation states that the MODAL_OPTIONSdefinition above is supposed to prevent the modal to be closed when i click outside of it. Thats also what was recommended in this thread. But it doesnt work for me. The modal still closes when i click outside. Does anyone know what causes that behaviour?

Answer 1

Try removing export

let ngbModalOptions: NgbModalOptions = {
  backdrop : 'static',
  keyboard : false
};

const modalRef = this.modalService.open(template, MODAL_OPTIONS);

Answer 2

https://stackblitz.com/run?file=app/modal-config.ts

Have look at this example from docs.

You can inject an instance of NgbModalConfig in your component and then change that as per your component's requirement.

// customize default values of modals used by this component tree
config.backdrop = 'static';
config.keyboard = false;

Full example for reference

import { Component } from '@angular/core';
import { NgbModalConfig, NgbModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  selector: 'ngbd-modal-config',
  templateUrl: './modal-config.html',
  // add NgbModalConfig and NgbModal to the component providers
  providers: [NgbModalConfig, NgbModal]
})
export class NgbdModalConfig {
  constructor(config: NgbModalConfig, private modalService: NgbModal) {
    // customize default values of modals used by this component tree
    config.backdrop = 'static';
    config.keyboard = false;
  }

  open(content) {
    this.modalService.open(content);
  }
}