title: Bootstrap 4.0 "Modal" not working with Angular 4
body: <p>Having trouble getting a <a href="https://getbootstrap.com/docs/4.0/components/modal/" rel="nofollow noreferrer">Bootstrap 4.0 modal</a> to work within an Angular 4 project.</p>
  
  <p>The modal works great inside a simple static HTML page: <a href="https://jsfiddle.net/Lq73nfkx/1/" rel="nofollow noreferrer">https://jsfiddle.net/Lq73nfkx/1/</a></p>
  
  <pre><code>&lt;!-- MODAL --&gt;
  &lt;!-- Button trigger modal --&gt;
  &lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal"&gt;
    Launch demo modal
  &lt;/button&gt;
  
  &lt;!-- Modal --&gt;
  &lt;div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal title&lt;/h5&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;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Close&lt;/button&gt;
          &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You can see in the screen capture below, pressing displaying the Modal causes the html to be changed in several places, not only within the model HTML itself, butt the document's <code>&lt;body&gt;</code> element is manipulated as well.</p>
  
  <p><a href="https://i.stack.imgur.com/MYHmW.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MYHmW.gif" alt="enter image description here"></a></p>
  
  <p>The Bootstrap JavaScript that performs HTML manipulation appears to not be firing within the Angular 4 project, when I use that exact same code inside the project, the HTML is not changed at all.</p>
  
  <p>Is there another way that I should be using Bootstrap with Angular 4? Or should I be using another Modal solution with Angular 4 that is not Bootstrap?</p>