title: Angular: Modal window rendering contained inside component
body: <p>I've nested some different Angular modules. Each one has is own service and such.
  The problem is when I want to open a modal window from an embedded module: Those elements open and works fine, but inside of it own module.
  I've searched but I couldn't find any specific solution for open the modal window outside all components (on browser main area, like a regular modal window).</p>
  <p>A GIF showing actual results:</p>
  <p><a href="https://i.stack.imgur.com/kFguL.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kFguL.gif" alt="Description" /></a></p>
  <p>I've tried to change the z-index (on main class, separated one, hardcoded in the html tag), disabling backdrop, and many other (nasty) tricks, but none of them seems solve this.</p>
  <p>The html looks like this:</p>
  <pre><code>&lt;div bsModal #modalFormPlanta=&quot;bs-modal&quot; [config]=&quot;{backdrop: false}&quot;&gt;
  &lt;div class=&quot;modal-dialog modal-md&quot;&gt;
      &lt;div class=&quot;modal-content&quot;&gt;
          &lt;app-formulario-planta-cliente *ngIf=&quot;showFormAddPlanta&quot; [Client]=&quot;Client&quot; [action]=&quot;PlantaSeleccionada?.id != null&quot; [element]=&quot;PlantaSeleccionada&quot; (finish)=&quot;closeFormPlanta($event)&quot;&gt;&lt;/app-formulario-planta-cliente&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This element is at the end of the html file. Outside of all <code>&lt;div&gt;</code></p>
  <p>Already tried on bsModal:</p>
  <pre><code>style=&quot;z-index: 9999 !important&quot;
  tabindex=&quot;-1&quot;
  class=&quot;modal fade&quot;
  data-backdrop=&quot;false&quot;
  </code></pre>
  <p>And the relevant code of this component:</p>
  <pre><code>    @ViewChild('modalFormPlanta') modalFormPlanta: ModalDirective;
      
      public openEditForm(elem) {
          this.PlantaSeleccionada = elem;
          this.showFormAddPlanta = true;
          this.modalFormPlanta.show();
      }
  
      public closeFormPlanta(event) {
          if (event) {
              this.PlantaSeleccionada.Cliente = event;
              this.loadPlantas();
          }
          this.modalFormPlanta.hide();
      }
  </code></pre>
  <p>Can you suggest me any solution to open every modal window on the browser area (no inside any component).</p>
  <p>Thank you very much!</p>