title: data-target - Angular
body: <p>I am displaying a <code>dialog</code> by using HTML directly</p>
  
  <pre><code>&lt;!-- Dialog --&gt;
        &lt;div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true"&gt;
          &lt;div class="modal-dialog modal-dialog-centered" role="document"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;h3 class="modal-title" id="exampleModalLongTitle"&gt;Something went wrong&lt;/h3&gt;
                &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
                  &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
                &lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;h5 class="modal-title" id="exampleModalLongTitle"&gt;Maximum 10 messages selected&lt;/h5&gt;
              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-primary"&gt;Ok&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
  
  &lt;button data-toggle="modal" data-target="#exampleModalCenter"&gt;RunIt&lt;/button&gt;
  </code></pre>
  
  <p>but I would like to do something previously so I would like to execute  <code>data-toggle="modal" data-target="#exampleModalCenter"</code> by javascript using <code>(click)</code></p>
  
  <p>So basically this would be the steps:</p>
  
  <p>1- <code>(click)="test()"</code></p>
  
  <p>2- execute  <code>data-toggle="modal" data-target="#exampleModalCenter"</code> by javascript in <code>test()</code></p>
  
  <p>to get the <code>DIV</code> that contains it, I have tried:</p>
  
  <pre><code>test(){
      var dialog= &lt;HTMLDivElement&gt;document.getElementById(exampleModalCenter);
    }
  </code></pre>
  
  <p>but I can not find the <code>exampleModalCenter</code></p>