backdrop propery doesn't work when click on outside area of modal

I am doing modal and the propery backdrop doesn't work properly when set on static. My window disappears when clicked outside of modal. I have the following code:

    @ViewChild('modal') input:any;
    open(content:any) {
      this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title', backdrop: 'static',backdropClass:'customBackdrop'}).result.then((result) => {
        this.closeResult = `Closed with: ${result}`;
      }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
      });
  }
   ngAfterViewInit(){
    this.modalService.open(this.input);
  }

   <ng-template #modal let-modal data-backdrop="static" data-keyboard="false">
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">Profile update</h4>
    <button type="button" class="btn-close" aria-label="Close" (click)="closed()" (click)="modal.dismiss('Cross click')"></button>
  </div>
  <div class="modal-body">
    <p *ngIf="checkIfPassword" class="margin-form">Password's must be equals</p>
    <form [formGroup]="formUserData">
      <input class="form-control margin-form" type="text" formControlName="userName" placeholder="Login" aria-label="default input example">
      <input class="form-control margin-form" (change)="change()" type="password" formControlName="password" placeholder="Password" aria-label="default input example">
      <input class="form-control margin-form" (change)="change()" type="password" formControlName="repeatPassword" placeholder="Repeat Password" aria-label="default input example">
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" [disabled]="checkIfPassword"  class="btn btn-outline-dark" (click)="sendUserData()" (click)="modal.close('Save click')" >Save</button>
  </div>
</ng-template>