Open a modal on page load Angular4

Question

I want to be able to see a modal open as soon as the page loads. I see a gray modal-backdrop, but the modal itself is missing.

Here is my html:

<div id="content-container">
  <div class="content">
    <div class="row">
      <div class="column" style="background-color: #EFF3F6;"> <h1 class = "pageTitle">Welcome!</h1>

        <div>
          <button [routerLink]="['/myPendingRequests']">Enter ePACS</button>
        </div>
      </div>
    </div>
    <div id="skipContent" tabindex=”-1″>
    </div>
  </div>
</div>
<button id="openModal" #openModal [hidden]="true" 
 data-toggle="modal" data-target="#openModal"></button>

Modal in the same component:

  <!-- Remove Modal -->
  <div class="openModal">
    <div class="modal left fade" id="openModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static">
        <div class="modal-dialog" role="document">
          <div class="modal-content" id="whiteColor">

              <div class="modal-header">
                <p> This is my modal</p>
              </div>

              <div class="modal-body">
              </div>
          </div>
        </div>
      </div>
  </div>

Thanks!!

Answer 1

This can be achieved simply by the following:

<div class="modal show" id="myModal" role="dialog" data-backdrop="static">
 <div class="modal-dialog">
    <div class="modal-content">
    <div class="modal-header">
      <h4 class="modal-title">Title of my Modal</h4>
    </div>
    <div class="modal-body">
       <p> Here is some text for the modal </p>
      <div class="buttonSelect">
        <button id="cancelConsentButton" class="btn btn success" onclick = "$('.modal').removeClass('show').addClass('fade');">Cancel</button>
        <button id="acceptConsentButton" class="btn btn success" onclick = "$('.modal').removeClass('show').addClass('fade');">I Agree</button>
      </div>

    </div>
</div>