title: Content projection / transclusion without using containing elements
body: <p>I'm trying to transclude some content inside a component (<code>&lt;parent&gt;</code>) with multiple <code>&lt;ng-content&gt;</code> slots <strong>without using a containing element for the child</strong>.</p>
  
  <p>I need to do this because the layout inside the parent uses <strong>flexbox</strong>, and I specifically want to leverage the power of flexbox for this particular use-case. Unfortunately with flexbox it works on the direct children, so the containing element is causing problems.</p>
  
  <p>Here is my pseudo parent template. It is using Bootstrap 4 with flexbox enabled.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs"&gt;
          Heading
          &lt;ng-content select="[anotherSlot]"&gt;&lt;/ng-content&gt;
      &lt;/div&gt;
      &lt;ng-content select="[child]"&gt;&lt;/ng-content&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Then is this what I am doing when I use the component. For simplicity's sake I'm not showing the <code>[anotherSlot]</code> in use, but it is a requirement.</p>
  
  <p>I have tried the @Directive approach, using <code>[child]</code></p>
  
  <pre><code>&lt;parent&gt;
      &lt;div child&gt;
          &lt;div class="col-xs-2"&gt;Small section&lt;/div&gt;
          &lt;div class="col-xs"&gt;This should fill the available space&lt;/div&gt;
      &lt;/div&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>But then my transcluded content is wrapped in a <code>&lt;div child&gt;</code>, so that breaks the flexbox layout.</p>
  
  <p>It renders like this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs"&gt;
          Heading
      &lt;/div&gt;
      &lt;div&gt; &lt;!-- This div is the problem --&gt;
          &lt;div class="col-xs-2"&gt;Small section&lt;/div&gt;
          &lt;div class="col-xs"&gt;This should fill the available space&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I've also tried the @Component approach:</p>
  
  <pre><code>&lt;parent&gt;
      &lt;child&gt;
          &lt;div class="col-xs-2"&gt;Small section&lt;/div&gt;
          &lt;div class="col-xs"&gt;This should fill the available space&lt;/div&gt;
      &lt;/child&gt;
  &lt;/parent&gt;
  </code></pre>
  
  <p>But that results in this:</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs"&gt;
          Heading
      &lt;/div&gt;
      &lt;child&gt; &lt;!-- This is still a problem --&gt;
          &lt;div class="col-xs-2"&gt;Small section&lt;/div&gt;
          &lt;div class="col-xs"&gt;This should fill the available space&lt;/div&gt;
      &lt;/child&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>How can I achieve this?</strong> The first <code>&lt;div&gt;</code> is static, but the others will vary depending on the use.</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-xs"&gt;
          Heading
      &lt;/div&gt;
      &lt;div class="col-xs-2"&gt;
          Small section
      &lt;/div&gt;
      &lt;div class="col-xs"&gt;
          This should fill the available space
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Can I use <code>&lt;template&gt;</code> somehow?</p>