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

Question

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>

divyam · Accepted Answer · 2018-04-02 12:00:53Z

2

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>

answered Apr 2, 2018 at 12:00

divyam

1329 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Mahi Tej Gvp Over a year ago

I am getting this error If I tried it TypeError: templateRef.createEmbeddedView is not a function

divyam Over a year ago

You have to pass template reference in your typescript using ` @ViewChild('tabTemplateRef') tabTemplateRef: TemplateRef<any>;` tabs= [{ title: 'About Us', content: this.tabTemplateRef },

Mahi Tej Gvp Over a year ago

what if I do not want to add a view child and just want to populate it from a collection?

Collectives™ on Stack Overflow

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

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related