title: How to add new tabs with components using the 'name/selector of the component' programmatically using angular 2/4?
body: <p>I am using material tabs: <a href="https://material.angular.io/components/tabs/overview" rel="noreferrer">https://material.angular.io/components/tabs/overview</a></p>
  
  <p>I have a page with a tab view that I want to use to populate one custom component per tab with a click of the button. Assume I have two components with the selectors "customcomponent1" and "customcomponent2". I want to make it such that when I click a button, a new 'object' will be added to the list like the following:</p>
  
  <blockquote>
    <p>{'component_name':'customcomponent1'}</p>
  </blockquote>
  
  <p>and a new tab "Tab2" will dynamically be created with that component inside of it is if it were like this:</p>
  
  <pre><code>  &lt;mat-tab-group&gt;
      &lt;mat-tab label="Tab1"&gt;
  &lt;button (click)="createNewTabWithComponent('customcomponent1')"&gt;&lt;/button&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Tab2"&gt;
         &lt;customcomponent1&gt;&lt;/customcomponent1&gt;
      &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>If I click on the button again... I get a new tab:</p>
  
  <pre><code>&lt;mat-tab-group&gt;
      &lt;mat-tab label="Tab1"&gt;
  &lt;button (click)="createNewTabWithComponent('customcomponent1')"&gt;&lt;/button&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Tab2"&gt;
         &lt;customcomponent1&gt;&lt;/customcomponent1&gt;
      &lt;/mat-tab&gt;
      &lt;mat-tab label="Tab3"&gt;
         &lt;customcomponent2&gt;&lt;/customcomponent2&gt;
      &lt;/mat-tab&gt;
    &lt;/mat-tab-group&gt;
  </code></pre>
  
  <p>How do I accomplish this with angular2/4? I normally would use something like $compile, but i dont think angular2/4 has one. What I want to avoid is creating a bunch of tabs for each component (imagine I have 10 components, really don't want to create multiple mat-tab placeholders for every single component and setting a show/hide flag on each one) and 'hardcoding' the one component inside of it.</p>
  
  <p>This isn't really a problem I think that is specific to tabs, if the solution shows how to add a component 'dynamically' using the name of the selector (that a user types in a textbox and hits a button to 'add to a list', that would be a considered answer too.</p>
  
  <p>A sample I can think of is if there is a text box, and somebody can type in any string. If a string matches the name of a component, then that component programatically 'dynamically shown' on the screen as if it were part of the original template.</p>
  
  <p>Pseudocode of what I am looking for that I know does not exist (i think, but it would be nice if it did):</p>
  
  <pre><code>&lt;button (click)="addNameOfComponentToListOfCustomComponentStrings('text-from-a-textbox')"&gt;Add Component&lt;/button&gt;
  
  &lt;div *ngFor="let string_name_of_component in listofcustomcomponentstrings"&gt;
      &lt;{{string_name_of_component}}&gt;&lt;&lt;/{{string_name_of_component}}&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Getting them into tabs would be a plus. If this is not doable, please post. Otherwise, please post.</p>
  
  <p>If there is maybe a workaround that could be done using some 'nested angular routing' where it pulls up the component based on the name of the component in ngFor, that may work too... am open to any ideas.</p>