CODEWITHSUNDEEP
angulartabsng-bootstrap
Mahi Tej Gvp
Mahi Tej Gvp

Reputation: 1034

How to Dynamically create tabs using *ngFor in Angular using ng-Bootstrap

I am using *ngFor with ng-tabset. But doing so would not paint the tabs at all. do ng-tabs need any dependency to be called in the module.ts file

          <ngb-tabset>
            <ng-tab *ngFor="let item of [1,2,3]" title="{{item}}">
                <ng-template ngbTabContent> {{item}}</ng-template>
            </ng-tab>



        </ngb-tabset>

It does work when I name it statically though as shown in the example 

 <ngb-tabset>
        <ngb-tab title="Simple">
          <ng-template ngbTabContent>
            <p>Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth
            master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh
            dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum
            iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.</p>
          </ng-template>
        </ngb-tab>
        <ng-tab *ngFor="let item of items" title=" {{item}}">
            <ng-template ngbTabContent> {{item}}</ng-template>
  </ng-tab>

Upvotes: 1

Views: 3525

Answers (1)

divyam
divyam

Reputation: 132

As far I understand you are pointing to single template for every Tab 

<ng-template ngbTabContent> {{item}}</ng-template>

You can try with ngTemplateOutlet to render multiple templates inside each and every Tab

<ngb-tabset>
    <ng-tab *ngFor="let tab of tabs" title="{{tab.title}}">
         <ng-container [ngTemplateOutlet]='tab.content'></ng-container>
    </ng-tab>
</ngb-tabset>

Upvotes: 2

Related Questions