title: Angular 2 transclusion: Can I pass slot content upward to a parent Component
body: <p>I have an outer component (blue-green) featuring some flexbox toolbars with a bunch of my own <code>ui-button</code> buttons. And an inner component, mostly doing its thing in the brown area (as you would expect).</p>
  
  <p><a href="https://i.stack.imgur.com/vsWi3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/vsWi3.png" alt=""></a></p>
  
  <p><em>However,</em> depending on the inner component (there are several ones what are switched forth and back), a few more contextual buttons must be inserted in that top/bottom bar.</p>
  
  <p><em>(CSS tricks with absolute positioning stuff on the outside are not an option, depending on size and convenience the outer toolbars can vary pretty much in position, size and so on...)</em></p>
  
  <hr>
  
  <h3><strong>Now my question is:</strong></h3>
  
  <p>Can I somehow pass in a reference to some placeholder <em>(black square brackets)</em> (just like regular <a href="https://scotch.io/tutorials/angular-2-transclusion-using-ng-content" rel="noreferrer">content projection/transclusion</a>), and have them filled by content coming from the child component?</p>
  
  <p>With something like <a href="https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/" rel="noreferrer">ngTemplate[Outlet]</a> perhaps? And/or <a href="https://angular.io/guide/template-syntax#how-to-use-output" rel="noreferrer">using @Output</a>?  </p>
  
  <p>I want to “pass upwards” more than <code>plain text</code> or <code>simple &lt;b&gt;rich&lt;/b&gt; &lt;i&gt;html&lt;/i&gt;</code> but ideally true angular template code, including custom components like</p>
  
  <pre><code>    &lt;ui-button icon="up.svg" (click)='...'&gt;&lt;/ui-button&gt;
      &lt;ui-button icon="down.svg" (click)='...'&gt;&lt;/ui-button&gt;
  </code></pre>
  
  <p>...leading in the outer component's top bar to:</p>
  
  <pre><code>&lt;section class='some-flexbox'&gt;
      &lt;ui-button icon="home.svg" (click)='...'&gt;&lt;/ui-button&gt;
  
      &lt;ui-button icon="up.svg" (click)='...'&gt;&lt;/ui-button&gt;
      &lt;ui-button icon="down.svg" (click)='...'&gt;&lt;/ui-button&gt;
  
      &lt;ui-button icon="help.svg" (click)='...'&gt;&lt;/ui-button&gt;
      &lt;ui-button icon="account.svg" (click)='...'&gt;&lt;/ui-button&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p><em>Thinking about it, the click events of those buttons added should find their way back home into the child, sigh...</em></p>
  
  <p><strong>update</strong></p>
  
  <p><a href="https://blog.angular-university.io/angular-ng-template-ng-container-ngtemplateoutlet/#dynamictemplatecreationwiththengtemplateoutletdirective" rel="noreferrer"><code>ngTemplateOutlet</code></a> sounds pretty interesting</p>
  
  <blockquote>
    <p>We can also take the template itself and instantiate it anywhere 
    on the page, using the ngTemplateOutlet directive:</p>
  </blockquote>
  
  <p>Examining, still unsure how...</p>