[Fixed] Disable click event outside of bootstrap modal area to close modal in angular 4

Issue

I am new in anguar4. I am using bootstrap modal in my project. Modal is going to hide when click on outside of modal.
here is my code

//in html

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>

// in ts code

@ViewChild('noticeModal') public noticeModal: ModalDirective;

ngAfterViewInit() {
   this.noticeModal.show();
};

Solution

please add this config’s in html. Hope it will help your problem.

<div bsModal #noticeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" 
    [config]="{backdrop: 'static',  keyboard: false}" 
    aria-labelledby="myLargeModalLabel"
    aria-hidden="true">

    <div class="modal-dialog modal-md">
        <div class="modal-content">
              Hello World
        </div>
    </div>
</div>