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

Question

I am attempting to develop a tab view where I could dynamically load tabs during runtime. I recently started using ngb-tabset from the ng-boostrap, and found it very useful except I can't seem to create tabs dynamically.

Long2know has created almost exactly what I've been trying to implement here. The challenge currently is providing the data for this example to work. Ideally, if it was possible to 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" would be an array of different components. Consequently, createTab would be a directive that used factoryResolver with ViewContainerRef to make component on the fly.

If I try something like this I will not get an error, but the tab view will not show at all. After looking at the source code of the ngb-tabset I realized that it uses @ContentChildren to obtain the tab content which doesn't work with creating components dynamically with ViewContainerRef.

I am just wondering if there is some other way that might be similar to achieve this? I know there is probably way to accomplish this with the router, however I've invested a lot more time into this approach so it would be preferred, but I'm open to anything.

Answer 1

Try

<ngb-tabset [destroyOnHide]="false">
...
</ngb-tabset>

This will prevent the elements to be destroyed