title: Open modal component from other component
body: <p>I have a component and it contains a modal.</p>
  
  <pre><code>&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;h4 class="modal-title pull-left"&gt;Large modal&lt;/h4&gt;
            &lt;button type="button" class="close pull-right" (click)="lgModal.hide()" 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;
            {{current}}
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p>I open the modal with <code>@ViewChild('lgModal') modal;</code> and call <code>this.modal.show();</code></p>
  
  <p>But i want to separate the HTML, So is it possible to call component <code>B</code> from component <code>A</code>?</p>