title: Angular - Open a modal as separate component - without using ng-modal
body: <p>I have componentB which HTML have Modal bootstrap code. From ComponentA, I need to open the the componentB in componentA.</p>
  
  <p>The popup is not shown in the UI. On inspecting the page, the component is getting loaded but it is not shown in UI. </p>
  
  <pre><code>&lt;app-root&gt; 
    &lt;app-a&gt;
      &lt;app-b&gt;&lt;/app-b&gt;
    &lt;/app-a&gt;
  &lt;/app-root&gt;
  </code></pre>
  
  <p>NOTE: I dont have any CSS in both the components</p>
  
  <p>ComponentA.html:</p>
  
  <pre><code>&lt;button (click)="popup()"&gt;Open&lt;/button&gt;
  &lt;app-b *ngIf="openModal" [openModal]="true" &gt;&lt;/app-b&gt;
  </code></pre>
  
  <p>ComponentA.ts:</p>
  
  <pre><code> popup(){
      this.openModal = true;
    }
  </code></pre>
  
  <p>componentB.html:</p>
  
  <pre><code>&lt;div *ngIf="openModal" id="myModal" class="modal fade" role="dialog"&gt;
    &lt;div class="modal-dialog"&gt;
  
      &lt;!-- Modal content--&gt;
      &lt;div class="modal-content"&gt;
        &lt;div class="modal-header"&gt;
          &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
          &lt;h4 class="modal-title"&gt;Modal Header&lt;/h4&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          &lt;p&gt;Some text in the modal.&lt;/p&gt;
        &lt;/div&gt;
        &lt;div class="modal-footer"&gt;
          &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>componetb.ts:</p>
  
  <pre><code>@Input('openModal') openModal : boolean
  </code></pre>
  
  <p>Thanks in Advance.</p>