title: Bootstrap 4 Modal appearing backdrop angular2
body: <p>Using Bootstrap 4 in angular2 project,in multiple component in one component However, my modal is appearing underneath the grey fade (backdrop) and is non editable.<a href="https://i.stack.imgur.com/04sDP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/04sDP.png" alt="enter image description here"></a></p>
  
  <p>firstComponent.html</p>
  
  <pre><code>&lt;batopPage&gt;
      &lt;button class="btn btn-success" (click)="lgModal.show()"&gt;Large modal&lt;/button&gt;
      &lt;!-- Large modal --&gt;
      &lt;div bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;div class="modal-header"&gt;
              &lt;button class="close" (click)="lgModal.hide()" aria-label="Close"&gt;
                &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
              &lt;/button&gt;
              &lt;h4 class="modal-title"&gt;Large modal&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="modal-body"&gt;
             suscipit lobortis nisl ut aliquip ex ea commodo consequat.
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;button class="btn btn-primary confirm-btn" (click)="lgModal.hide()"&gt;Save changes&lt;/button&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  &lt;/batopPage&gt;
  </code></pre>
  
  <p>firstComponent.ts</p>
  
  <pre><code>@Component({
    selector: 'firstcomponent',
    template: require('./firstComponent.html')
  })
  export class Modals {
    @ViewChild('childModal') childModal: ModalDirective;
  
    showChildModal(): void {
      this.childModal.show();
    }
  
    hideChildModal(): void {
      this.childModal.hide();
    }
  }
  </code></pre>
  
  <p>otherComponent.html</p>
  
  <pre><code>&lt;firstcomponent&gt;&lt;/firstcomponent&gt;
  </code></pre>