title: Dynamic tabs with user-click chosen components
body: <p>I'm trying to setup a tab system that allows for components to register themselves (with a title). The first tab is like an inbox, there's plenty of actions/link items to choose from for the users, and each of these clicks should be able to instantiate a new component, on click. The actions / links comes in from JSON.</p>
  
  <p>The instantiated component will then register itself as a new tab.</p>
  
  <p>I'm not sure if this is the 'best' approach? So far, the only guides I've seen are for static tabs, which doesn't help.</p>
  
  <p>So far, I've only got the tabs service which is bootstrapped in main to persist throughout the app. It looks something like this:</p>
  
  <pre><code>export interface ITab { title: string; }
  
  @Injectable()
  export class TabsService {
      private tabs = new Set&lt;ITab&gt;();
  
      addTab(title: string): ITab {
          let tab: ITab = { title };
          this.tabs.add(tab);
          return tab;
      }
  
      removeTab(tab: ITab) {
          this.tabs.delete(tab);
      }
  }
  </code></pre>
  
  <p>Questions:</p>
  
  <ol>
  <li>How can I have a dynamic list in the inbox that creates new (different) tabs? I am sort of guessing the <code>DynamicComponentBuilder</code> would be used?</li>
  <li>How can the components be created from the inbox (on click) register themselves as tabs and also be shown? I'm guessing <code>ng-content</code>, but I can't find much info on how to use it</li>
  </ol>
  
  <p><strong>EDIT:</strong> An attempt to clarify.</p>
  
  <p>Think of the inbox as a mail inbox. Items are fetched as JSON and it displays several items. Once one of the items is clicked, a new tab is created with that items action 'type'. The type is then a component.</p>
  
  <p><strong>EDIT 2:</strong> <a href="https://i.imgur.com/yzfMOXJ.png" rel="noreferrer">Image</a>.</p>