title: Angular dynamically display templates with *ngTemplateOutlet, based on component variable
body: <p>Let me start by saying that I did look at several other questions regarding ngTemplateOutlet (like: <a href="https://stackoverflow.com/questions/46633431/angular-2-dynamically-change-the-template-in-the-ngtemplateoutlet">Angular 2 dynamically change the template in the ngTemplateOutlet</a> or  <a href="https://stackoverflow.com/questions/46513603/ngtemplateoutlet-with-dynamic-value">ngTemplateOutlet with dynamic value</a>), but they didn't really cover what I'm trying to do, or maybe I can't see how the logic can be applied to what I'm trying to achieve.</p>
  
  <p>My goal:</p>
  
  <p>I have a page, where I want to be able to change the order of my templates being displayed.</p>
  
  <p>I have 2 simple templates, "colors" and "fonts":</p>
  
  <pre><code>&lt;ng-template #colors&gt;
    Red: #FF0000
    Green: #00FF00
    Blue: #0000FF
  &lt;/ng-template&gt;
  
  &lt;ng-template #fonts&gt;
    Helvetica
    Verdana
    Times New Roman
  &lt;/ng-template&gt;
  </code></pre>
  
  <p>I have no problem showing these in a predefined order:</p>
  
  <pre><code>&lt;div&gt;
    &lt;ng-container *ngTemplateOutlet="colors"&gt;&lt;/ng-container&gt;
  &lt;/div&gt;
  &lt;div&gt;
    &lt;ng-container *ngTemplateOutlet="fonts"&gt;&lt;/ng-container&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is, I don't know how to display these templates based on a variable on my component. 
  My component holds an array variable, which contains the order and names of the templates I want to display:</p>
  
  <pre><code>public order: ['fonts', 'colors'];
  </code></pre>
  
  <p>Notice here, that the order of the templates are switched, so "fonts" should be shown first, then "colors".</p>
  
  <p>My idea was to assign the *ngTemplateOutlet value based on the order variable like this:</p>
  
  <pre><code>&lt;ng-container [ngTemplateOutlet]="order[0]"&gt;&lt;/ng-container&gt;
  &lt;ng-container [ngTemplateOutlet]="order[1]"&gt;&lt;/ng-container&gt;
  </code></pre>
  
  <p>But when I do so, I get the following console error:</p>
  
  <pre><code>TypeError: templateRef.createEmbeddedView is not a function
  </code></pre>
  
  <p>I'm not exactly sure where I'm going wrong with this, or how I can get the *ngTemplateOutlet to take it's template name from an array variable on my component.</p>
  
  <p>I created this stackblitz for it: <a href="https://stackblitz.com/edit/angular-q7uqbx" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-q7uqbx</a></p>
  
  <p>Any help would be much appreciated!</p>
  
  <p>Kind regards,</p>
  
  <p>Jesper</p>