title: how to show a modal popup whose body is on a different page in angular
body: <p>I need to show a modal popup on a different page whose body is on app.component.html.</p>
  
  <p><strong>App.Component.html:</strong></p>
  
  <pre><code>  &lt;ng-template #template&gt;
        &lt;div class="modal-header"&gt;
          &lt;h4 class="modal-title pull-left"&gt;Modal&lt;/h4&gt;
          &lt;button type="button" class="close pull-right"
                  aria-label="Close" (click)="modalRef.hide()"&gt;
            &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
          &lt;/button&gt;
        &lt;/div&gt;
        &lt;div class="modal-body"&gt;
          This is a modal.
        &lt;/div&gt;
      &lt;/ng-template&gt;
  </code></pre>
  
  <p><strong>App.component.ts:</strong></p>
  
  <pre><code>   import { TemplateRef } from '@angular/core';
     public openModal(template: TemplateRef&lt;any&gt;) {
          debugger;
          this.modalRef = this.modalService.show(template); // {3}
        }
  </code></pre>
  
  <p><strong>Another.component.html:</strong></p>
  
  <pre><code> &lt;input type="button" class="btn" (click)="openModal(template)" value="open popup" /&gt;
  </code></pre>
  
  <p><strong>Another.component.ts:</strong></p>
  
  <pre><code>import { Component, OnInit, TemplateRef } from '@angular/core';
   export class ABC implements OnInit {
    template: TemplateRef&lt;any&gt;;
    public openModal(template) {
      debugger;  // getting null as template
      this.appComponent.openModal(template);
    }
   }
  </code></pre>