Modal already Opens

Question

Hi

  I have below code . Modal should open on click of button but it already gets displayed on page.

<div class="container">
<div class="row pt-3">
  <div class="col-6">
    <h4>Student Portal</h4>
  </div>
  <div class="col-6 text-end">
    <button class="btn btn-outline-success" (click)="openModal()">Add New</button>
  </div>
</div>
</div>

<div class="row">
  <div class="col-3">
    <div class="card">
      <div class="card-header">
        <div class="row">
          <div class="col-6">
            Student Name
          </div>
          <div  class="col-6 text-end">
            Mobile No
          </div>
        </div>
      </div>
      <div class="card-body">
        <p>Email</p>
        <p>City , State , PinCode</p>
        <p>Address</p>
      </div>
    </div>
  </div>
</div>

<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Create New Student</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal Body...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Thanks