title: Render Angular components in different parts of the root template
body: <p>Given the following Angular view:</p>
  <pre><code>  &lt;accordion&gt;
      &lt;accordion-item heading=&quot;Item #1&quot;&gt;
        The content of the first menu item #1 goes here...
      &lt;/accordion-item&gt;
      &lt;accordion-item heading=&quot;Item #2&quot;&gt;
        &lt;other-component&gt;
        &lt;/other-component&gt;
      &lt;/accordion-item&gt;
      &lt;accordion-item heading=&quot;Item #3&quot;&gt;
        The content of the third menu item #3 goes here...
      &lt;/accordion-item&gt;
    &lt;/accordion&gt;
  
  </code></pre>
  <p>How can I render template of the accordion-item component in one part of template of the accordion component and whatever is inside the accordion-item in other part of the root template?</p>
  <pre><code>// the accordion template
  &lt;div class=&quot;accordion accordion-container&quot;&gt;
    &lt;div class=&quot;items-menu&quot;&gt;
      &lt;ng-container *ngFor=&quot;let item of items; let i = index&quot;&gt;
        &lt;accordion-item [heading]=&quot;item.heading&quot;&gt; &lt;/accordion-item&gt;
      &lt;/ng-container&gt;
    &lt;/div&gt;
  
    &lt;ng-container *ngFor=&quot;let item of items; let i = index&quot;&gt;
      ... The children of accordion-item are being rendered here ...
    &lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>