Remove the Modal by using X mark only

Question

Goal: You should only close the modal by using the X mark only and not clicking at outside of the modal.

Problem: Don't know how to solve it when I tried using the syntax code [config]="{backdrop: 'static'}"

Info:

1. I'm new in angular
2. Using VS code and ngx-bootstrap

Here's a Minimal Sample StackBlitz replicating the issue.

Thank you!

Answer 1

show method on the BsModalService takes a config Object as a second argument. You can specify the backdrop options there:

Here, give this a try:

import { Component, TemplateRef } from '@angular/core';
import { BsModalService } from 'ngx-bootstrap/modal';
import { BsModalRef } from 'ngx-bootstrap/modal/bs-modal-ref.service';


@Component({
    selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent{
  modalRef: BsModalRef;

  config = {
    backdrop: true,
    ignoreBackdropClick: true
  };

  constructor(private modalService: BsModalService) {}
  person:any={}
  openModal(template: TemplateRef<any>) {
    this.modalRef = this.modalService.show(template, this.config);
  }

  openModalWithComponent() {

    this.modalRef = this.modalService.show(ModalContentComponent);
    this.modalRef.content.title = 'Modal with component';

  }
}

/* This is a component which we pass in modal*/

@Component({
  selector: 'modal-content',
  template: `
    <div class="modal-header">
      <h4 class="modal-title pull-left">{{title}}</h4>

    </div>
    <div class="modal-body">
    <input type="text" placeholder="Last Name">

    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-primary" >Save Last Name</button>
    </div>
  `
})
export class ModalContentComponent {
  title: string;
  constructor(private modalService: BsModalService) {}
}

---

Here's a Working Sample StackBlitz for your ref.