title: To open bootstrap 4 modal by calling method in typescript
body: <p>I am using <strong><a href="https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_modal&amp;stacked=h" rel="nofollow noreferrer">bootstrap 4 modal</a></strong> in my angular app(v6):</p>
  
  <p><strong>CODE:</strong></p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"&gt;
      Open
    &lt;/button&gt;
  
    &lt;!-- The Modal --&gt;
    &lt;div class="modal" id="myModal"&gt;
      &lt;div class="modal-dialog"&gt;
        &lt;div class="modal-content"&gt;
  
          &lt;!-- Modal Header --&gt;
          &lt;div class="modal-header"&gt;
            &lt;h4 class="modal-title"&gt;Modal Heading&lt;/h4&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;!-- Modal body --&gt;
          &lt;div class="modal-body"&gt;
            Modal body..
          &lt;/div&gt;
  
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Now i will open the modal by clicking <code>open</code> button. This works fine.But instead of opening it manually, On clicking <code>open</code> button i need call <code>method/function</code> for ex: </p>
  
  <pre><code>open() {
       if('Some condition'){
         // Don't open the modal
       } else {
          // Open the modal
       }
  
     }
  </code></pre>
  
  <p>In the <code>open()</code> method if condition fails <code>modal</code> should open, else should not.How can i achieve this using only <code>typescript</code></p>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-7tgotw?file=src%2Fapp%2Fapp.component.ts" rel="nofollow noreferrer">Stackblitz Demo</a></strong></p>