title: Angular pass a Component as ng-template of another Component
body: <p>In my Angular 6 app I need to pass a Component to another Component as its <a href="https://angular.io/guide/structural-directives#the-ng-template" rel="noreferrer">ng-template</a>.</p>
  
  <p>The reason is that I have a <strong>Component A</strong> that I need to replicate many times, but each time it has to include different components (let's call them <strong>Component B</strong> and <strong>Component C</strong>) which <strong>have the same Inputs</strong>.</p>
  
  <p><strong>Component A</strong> template:</p>
  
  <pre><code>&lt;div class="row-detail-panel"&gt;
    &lt;h4 class="row-detail-panel-title"&gt;{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}&lt;/h4&gt;
  
    &lt;!--THIS IS THE COMPONENT I WANT TO INJECT--&gt;
    &lt;app-component-b
      [inline]="true"
      [form]="form"
    &gt;&lt;/app-component-b&gt;
    &lt;!--END--&gt;
  
    &lt;!--some more html code here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And I create a <strong>Component A</strong> instance using:</p>
  
  <pre><code>&lt;app-component-a
    [entity]="row"
    [entityName]="entityName"
  &gt;&lt;/app-component-a&gt;
  </code></pre>
  
  <hr>
  
  <p>So I thought about using <code>ng-template</code>, so changing the <strong>Component A</strong> template as follows:</p>
  
  <pre><code>&lt;div class="row-detail-panel"&gt;
    &lt;h4 class="row-detail-panel-title"&gt;{{ newEntity ? 'Add new' : 'Edit this'}} {{ entityName }}&lt;/h4&gt;
  
    &lt;ng-template&gt;&lt;/ng-template&gt;
  
    &lt;!--some more html code here--&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And creating a <strong>Component A</strong> instance using:</p>
  
  <pre><code>&lt;app-component-a
    [entity]="row"
    [entityName]="entityName"
  &gt;
    &lt;app-component-b
      [inline]="true"
      [form]="form" &lt;!--PROBLEM: "form" does not exist here--&gt;
    &gt;&lt;/app-component-b&gt;
  &lt;/app-component-a&gt;
  </code></pre>
  
  <p>So I can easily inject <strong>Component C</strong> instead of <strong>Component B</strong> as <strong>Component A</strong>'s ng-template:</p>
  
  <pre><code>&lt;app-component-a
    [entity]="row"
    [entityName]="entityName"
  &gt;
    &lt;app-component-c
      [inline]="true"
      [form]="form" &lt;!--PROBLEM: "form" does not exist here--&gt;
    &gt;&lt;/app-component-c&gt;
  &lt;/app-component-a&gt;
  </code></pre>
  
  <p><strong>PROBLEM</strong>:</p>
  
  <p>the variable <code>form</code> that I need to inject to <strong>Component B</strong> or <strong>Component C</strong> exists only inside <strong>Component A</strong> and <strong>not</strong> in <strong>Component A's parent</strong> (for some reasons I cannot move it one level up).</p>
  
  <p>How can I solve this problem?</p>