title: Bootstrap 4 modal in Angular 6 child component
body: <p>While working with Angular 6 + Bootstrap 4 combination I stumbled upon the issue with modal. Whenever I open a modal - it opens up behind the <em><strong>modal-backdrop</strong></em>. Interesting that it is not the only modal on the project, but only this one acts funny.</p>
  
  <p>I have imported relevant libraries as follows (<em>Angular.json</em> file):</p>
  
  <pre><code>"styles": [            
            "src/styles.scss",
            "node_modules/bootstrap/dist/css/bootstrap.min.css"
          ],
          "scripts": [
            "node_modules/jquery/dist/jquery.min.js",  
            "node_modules/popper.js/dist/umd/popper.min.js", 
            "node_modules/bootstrap/dist/js/bootstrap.min.js"
          ]
  </code></pre>
  
  <p>Button to open modal:</p>
  
  <pre><code>  &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;button class="btn btn-md" data-toggle="modal" data-target="#modalID"&gt;Click Here&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>Modal itself (simplified):</p>
  
  <pre><code>&lt;div class="modal fade" id="modalID"&gt;
    &lt;div class="modal-dialog"&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;!-- Header Here --&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;!-- Body here --&gt;
        &lt;div class="modal-footer"&gt;
          &lt;div class="col-6"&gt;
            &lt;!-- Buttons here --&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Now all of the HTML code is inside a child component - which is a part of a parent. Code below:</p>
  
  <pre><code>&lt;div class="row"&gt;    
    &lt;div class="col-lg-9"&gt;
       &lt;div class="space-bottom"&gt;
         &lt;app-given-component&gt;&lt;/app-given-component&gt;
       &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I personally believe that the issue the modal is behind the backdrop is due to styling on <em>row</em> class. Using <em>dev tools</em> I remove the <em>display:flex;</em> and modal appears to be OK, but the rest of the styling on the page becomes messed up. I don't know how to overcome this.</p>
  
  <p>Additional note: it is not an option to remove <em>row</em> or <em>col-lg-9</em> classes.</p>
  
  <p>I would really appreciate your help.</p>
  
  <p>Many thanks,
  Alex</p>