Delete Modal not showing

Hi

  I have below code but it is not going in If confition

<div class="modal fade" id="mydeleteModal" tabindex="-1" aria-labelledby="confirmationModalLabel" aria-hidden="true">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
              <h5 class="modal-title" id="confirmationModalLabel">Confirmation</h5>
              <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <div class="modal-body">
              Are you sure you want to delete this item?
          </div>
          <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
              <button type="button" class="btn btn-danger" (click)="Delete()">Delete</button>
          </div>
      </div>
  </div>
</div>

@ViewChild('mydeleteModal') delModel : ElementRef | undefined;
onDelete(Id: number) {
    debugger;
    if (this.delModel != null) {
      this.delModel.nativeElement.style.display = 'block';
    }
  }

Thanks