2

I am using ng2-bootstrap dynamic tabs and I am wondering if it is possible to set the content in a tab to be a template or a separate component.

So in the example in the documentation you set an array of tabs like this.

public tabs: any[] = [
{title: 'Dynamic Title 1', content: 'Dynamic content 1'},
{title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true},
{title: 'Dynamic Title 3', content: 'Dynamic content 3', removable: true}

];

I would like to set the content to a template or a separate component. Is this possible? Please provide an example. Thanks!

Derrick Hammond
  • 45
  • 5
  • http://stackoverflow.com/questions/36325212/angular-2-dynamic-tabs-with-user-click-chosen-components/36325468#36325468, you can also use `createEmbeddedView()` instead of `createElement` and use a `TemplateRef` (from a ``) and create one for each element in the array similar to the linked answer. – Günter Zöchbauer Feb 06 '17 at 18:59
  • Thanks for the comment. I saw the linked thread and wasn't sure if it was the solution I was looking for. I am looking closer into this as a possible solution. I will post a comment when I find a solution. – Derrick Hammond Feb 06 '17 at 19:59

3 Answers3

0

From the example in ng2-bootstrap

<tabset>
<tab heading="component tab title">
     Your component goes here:
     <your-component></your-component>
</tab>
</tabset>

You can write any component, and put it's selector in the tab tag

Omri Luzon
  • 3,975
  • 6
  • 20
  • 29
  • I can see how a tab could be built in this way but how is this dynamic? I need to pass the tab it's component in the array of tabs not statically declare it in the markup. – Derrick Hammond Feb 06 '17 at 20:08
0

Thanks to Günter Zöchbauer for linking to the post Angular 2 dynamic tabs with user-click chosen components. This provided me with enough direction to complete the task. I'm using Angular2 v2.4.1 so my solution was a little different than what was presented in the other post. I will post more on my resolution when I get it put together more completely.

Community
  • 1
  • 1
Derrick Hammond
  • 45
  • 5
0

The only way I have figured out to solve your problem is to leave the content as an empty string i.e. {title: 'someTab', content: ''} and then in your template use a switch statement, using the title of the tab to select which component you want to display for a specific tab.

Eg: In your app.component.ts file:

  public tabs: any[] = [
{title: 'TabA', content:  ''},
{title: 'TabB', content: '', },
{title: 'TabC', content: '', },

];

In your template:

<tabset>
    <tab heading="Static title">Static content</tab>
    <tab *ngFor="let tabz of tabs"
         [heading]="tabz.title"
         [active]="tabz.active"
         (select)="tabz.active = true"
         (deselect)="tabz.active = false"
         [disabled]="tabz.disabled"
         [removable]="tabz.removable"
         (removed)="removeTabHandler(tabz)"
         [ngSwitch]="tabz.title">

  <tab-a-component *ngSwitchCase="'TabA'" ></tab-a-component>
  <tab-b-component *ngSwitchCase="'TabB'" ></tab-b-component>
  <tab-c-component *ngSwitchCase="'TabC'" ></tab-c-component>

    </tab>
  </tabset>
Johanna
  • 73
  • 1
  • 5