Bootstrap 4 modal no componente filho Angular 6

Enquanto trabalhava com a combinação Angular 6 + Bootstrap 4, me deparei com o problema do modal. Sempre que eu abro um modal - ele abre atrás do fundo do modal . Interessante que não é o único modal do projeto, mas apenas este é engraçado.

Importei bibliotecas relevantes da seguinte forma ( arquivo Angular.json ):

"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"
        ]

Botão para abrir modal:

  <div class="row">
    <div class="col">
      <button class="btn btn-md" data-toggle="modal" data-target="#modalID">Click Here</button>
    </div>
  </div>

Modal propriamente dito (simplificado):

<div class="modal fade" id="modalID">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <!-- Header Here -->
      </div>
      <div class="modal-body">
        <!-- Body here -->
      <div class="modal-footer">
        <div class="col-6">
          <!-- Buttons here -->
      </div>
    </div>
  </div>
</div>

Agora todo o código HTML está dentro de um componente filho - que é parte de um pai. Código abaixo:

<div class="row">    
  <div class="col-lg-9">
     <div class="space-bottom">
       <app-given-component></app-given-component>
     </div>
   </div>
</div>

Eu pessoalmente acredito que o problema do modal está por trás do pano de fundo devido ao estilo na classe de linha . Usando ferramentas de desenvolvimento , removo a tela: flex; e modal parece estar OK, mas o resto do estilo na página fica confuso. Não sei como superar isso.

Observação adicional: não é uma opção remover as classes de linha ou col-lg-9 .

Eu realmente apreciaria sua ajuda.

Muito obrigado Alex