Unable to show backdrop in modal angular

Question

I'm using this modal

.ts

import { ModalDirective } from 'ngx-bootstrap/modal';
@ViewChild('create', { static: false }) modalCreate: ModalDirective;

openCreate()
{
  this.modalCreate.show();
}

html

<div bsModal #create="bs-modal" [config]="{ backdrop: 'static', ignoreBackdropClick: false, keyboard: true }" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="dialog-child-name">
  <div class="modal-dialog" >
    <div class="modal-content bor-shadow">
      <div class="modal-header">
       <h1 class="modal-title">Create</h1>
      </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
         
        </div>
    </div>
  </div>
</div>

through this code modal is created but the backdrop in not present.

Answer 1

Looks like you're using bootstrap modal for angular.

You should import and use the modal service to open the modal - that's the proper way of doing it according to the official documentation:

import { BsModalService, BsModalRef } from 'ngx-bootstrap/modal';

@ViewChild('create', { static: false }) modalCreate: TemplateRef<any>;


constructor(private modalService: BsModalService) {}

openCreate() {
  // pass specific config to show backdrop
  const config = {
    backdrop: true,
    ignoreBackdropClick: false
  };

    this.modalRef = this.modalService.show(this.template, config);
}

Also changed the ViewChild to point to a template rather than a directive, since you're opening the template using the service now.