Dynamic tabs with user-click chosen components
<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>