Angular 4: How to make dynamic tabs with ng-boostrap api

I am trying to create a tab view where I could load the tabs dynamically at runtime. I recently started using ngb-tabset from ng-boostrap and found it to be very useful, but I cannot create dynamic tabs.

Long2know has created almost what I was trying to implement here. The problem currently is providing the data for this example to work. Ideally if one could create something like this

<ngb-tabset  (tabChange)="tabChange($event)" [activeId]="activeId">
    <ngb-tab *ngFor="let comp of components; [id]="start" title="tab1">
        <template ngbTabContent >
            <div> *createTab="comp" </div>
        </template>
    </ngb-tab>
</ngb-tabset>

      

        
        
        
      

    

Where "components" will represent many different components. Hence, createTab would be a directive that would use a factoryResolver with a ViewContainerRef to make the component on the fly.

If I try something like this, I don't get an error, but the tab view won't show at all. Looking at the source code of ngb-tabset I realized that it is using @ContentChildren to get the tab content, which does not work with creating components dynamically with ViewContainerRef.

I'm just wondering if there is another way that could be similar to achieve this? I know there is probably a way to do it with a router, however I've spent a lot more time with this approach, so it would be preferable, but I'm open to anything.