title: Angular template and transclusion: content out of order
body: <p>I'm facing some challenges with Angular content projection.
  I have a template that has some common HTML for every instance that will be used, and another part that will be subject to change from case to case, via transclusion (<code>ng-content</code>).
  The problem is that no matter the order I use on my template DOM elements , the output is always the same.
  Here's the code:</p>
  
  <pre><code>&lt;ng-template #lol&gt;
    &lt;ng-content select=".world"&gt;&lt;/ng-content&gt;
    &lt;div&gt;Hello&lt;/div&gt;
  &lt;/ng-template&gt;
  
  &lt;ng-container [ngTemplateOutlet]="lol"&gt;
    &lt;div class="world"&gt;World&lt;/div&gt;
  &lt;/ng-container&gt;
  </code></pre>
  
  <p>I would expect the produced result to be:</p>
  
  <pre><code>World
  Hello
  </code></pre>
  
  <p>given that I'm placing first the transcluded element and only then the static part of the template. But even if I switch their order on the template, the result will always be:</p>
  
  <pre><code>Hello
  World
  </code></pre>
  
  <p>And I can't understand why.
  Can someone please shed some lights on why this is happening and what can I do to produce the output I want?
  Thank you.</p>
  
  <p><strong>NOTE:</strong> Here's a StackBlitz with a full example: <a href="https://stackblitz.com/edit/angular-vfecbs?file=src%2Fapp%2Fapp.component.html" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-vfecbs?file=src%2Fapp%2Fapp.component.html</a></p>