title: How to pass variables from ng-template declared in parent component to a child component/directive?
body: <p>So I want to know if there is a way to pass an ng-template and generate all it's content to include variables used in interpolation?
  <br>
  <br> 
  Also I'm still new to angular so besides removing the html element do I need to worry about removing anything else?
  <br>
  <br>
  At the end of this there will be a link to a stackblitz.com repo which will have all the code shown below. </p>
  
  <p>the following is my src/app/app.component.html code implementing my directive:</p>
  
  <pre><code>&lt;hello name="{{ name }}"&gt;&lt;/hello&gt;
  &lt;p&gt;
    Start editing to see some magic happen :)
  &lt;/p&gt;
  &lt;!-- popup/popup.directive.ts contains the code i used in button tag --&gt;
  &lt;button PopupDir="" body="this is a hardcoded message that is passed to popup box"&gt; simple 
  &lt;/button&gt;
  
  &lt;ng-template #Complicated=""&gt;
    &lt;div style="background-color: red;"&gt;
      a little more complicated but simple and still doable
    &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;button PopupDir="" [body]="Complicated"&gt;
    complicated
  &lt;/button&gt;
  
  &lt;ng-template #EvenMoreComplicated=""&gt;
    &lt;!-- name and data isn't being passed i need help here--&gt; 
    &lt;div style="background-color: green; min-height: 100px; min-width:100px;"&gt;
      {{name}} {{data}}
    &lt;/div&gt;
  &lt;/ng-template&gt;
  &lt;button PopupDir="" [body]="EvenMoreComplicated"&gt;
    more complicated
  &lt;/button&gt;
  </code></pre>
  
  <p>the following is my src/app/popup/popup.directive.ts</p>
  
  <pre><code>import { Directive, Input, TemplateRef, ViewContainerRef, HostListener } from '@angular/core'
  
  @Directive({
    selector: 'PopupDir, [PopupDir]'
  })
  export class Popup {
    @Input() body: string | TemplateRef&lt;any&gt;;
    viewContainer: ViewContainerRef;
    popupElement: HTMLElement;
  
    //i dont know if i need this
    constructor (viewContainer: ViewContainerRef) {
      this.viewContainer = viewContainer;
    }
  
    //adds onlick rule to parent tag
    @HostListener('click')
    onclick () {
      this.openPopup();
    }
  
    openPopup() {
      //Pcreate pupup html programatically
      this.popupElement = this.createPopup();
  
      //insert it in the dom
      const lastChild = document.body.lastElementChild;
      lastChild.insertAdjacentElement('afterend', this.popupElement);
    }
  
    createPopup(): HTMLElement {
      const popup = document.createElement('div');
      popup.classList.add('popupbox');
  
      //if you click anywhere on popup it will close/remove itself
      popup.addEventListener('click', (e: Event) =&gt; this.removePopup());
      //if statement to determine what type of "body" it is
      if (typeof this.body === 'string')
      {
        popup.innerText = this.body;
      } else if (typeof this.body === 'object')
      {
        const appendElementToPopup = (element: any) =&gt; popup.appendChild(element);
        //this is where i get stuck on how to include the context and then display the context/data that is passed by interpolation in ng-template
        this.body.createEmbeddedView(this.viewContainer._view.context).rootNodes.forEach(appendElementToPopup);
      }
      return popup;
    }
  
    removePopup() {
      this.popupElement.remove();
    }
  }
  </code></pre>
  
  <p>this is the link to the repo displaying my problem:
  <a href="https://stackblitz.com/edit/popupproblem" rel="nofollow noreferrer">https://stackblitz.com/edit/popupproblem</a></p>