title: In Angular 4, can I programmatically change the type of component being used in a template?
body: <p>I have a component (let's call it ListComponent) whose purpose is to edit a list. It allows the user to add, delete, and reorder elements. Its template looks something like this:</p>
  
  <pre><code>&lt;div&gt; &lt;!-- Some Buttons --&gt; &lt;/div&gt;
  &lt;ul&gt;
      &lt;li *ngFor="element in dataArray"&gt;
          &lt;string-editor [(NgModel)]=element&gt;&lt;/string-editor&gt;
          &lt;!-- More Buttons --&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The <code>&lt;string-editor&gt;</code> is also a custom component with a template that is basically just an input component with a bit of styling. What I want to be able to do is have multiple versions of ListComponent that can handle different types of data (e.g. numbers, custom objects with multiple fields.) To do this, I would like to be able to replace <code>&lt;string-editor&gt;</code> in the template with another component class (like <code>&lt;number-editor&gt;</code> or <code>&lt;my-custom-object-editor&gt;</code>.) They would all support NgModel. I have looked into dynamic component creation, but it appears that there is no way I can use it with <code>*ngFor</code>'s change detection. </p>
  
  <p>So, in summary, is there a way to change <code>&lt;string-editor&gt;</code> to another tag programmatically? If not, is there a way that I can use dynamic component creation with <code>*ngFor</code>'s change detection?</p>