Answer by Hamfri for Disable click outside of bootstrap modal area to close modal

If you are using @ng-bootstrap use the following:

Component

import { Component, OnInit } from '@angular/core';import { NgbModal } from '@ng-bootstrap/ng-bootstrap';@Component({  selector: 'example',  templateUrl: './example.component.html',  styleUrls: ['./example.component.scss'],})export class ExampleComponent implements OnInit {  constructor(    private ngbModal: NgbModal  ) {}  ngOnInit(): void {  }  openModal(exampleModal: any, $event: any) {    this.ngbModal.open(exampleModal, {      size: 'lg', // set modal size      backdrop: 'static', // disable modal from closing on click outside      keyboard: false, // disable modal closing by keyboard esc    });  }}

Template

<div (click)="openModal(exampleModal, $event)"> </div><ng-template #exampleModal let-modal><div class="modal-header"><h5 class="modal-title">Test modal</h5></div><div class="modal-body p-3"><form action=""><div class="form-row"><div class="form-group col-md-6"><label for="">Test field 1</label><input type="text" class="form-control"></div><div class="form-group col-md-6"><label for="">Test field 2</label><input type="text" class="form-control"></div><div class="text-right pt-4"><button type="button" class="btn btn-light" (click)="modal.dismiss('Close')">Close</button><button class="btn btn-primary ml-1">Save</button></div></form></div></ng-template>

This code was tested on angular 9 using:

1. "@ng-bootstrap/ng-bootstrap": "^6.1.0",

2. "bootstrap": "^4.4.1",