Rendering Tabs using *ngFor

[Takudzwa Mawarire]

Am trying to render a dynamic tabs using the code below: 

<ejs-tab [showCloseButton]="true" heightAdjustMode="Fill">

      <e-tabitems *ngFor="let data of field.fieldGroup; let i = index">

        <e-tabitem [header]="data.name">

          <ng-template #content>

            <div class="row">

              <div class="col-md-12 col-sm-12 d-flex align-items-center">

                <button

                  class="col-auto"

                  (click)="onremove.emit(i)"

                  fullWidth

                  nbButton

                  ghost

                  status="danger"

                >

                  REMOVE&nbsp;<nb-icon icon="minus-outline"></nb-icon>

                </button>

              </div>

            </div>

            <formly-field

              class="col-md-12 col-sm-12 d-flex align-items-center"

              [field]="data"

            ></formly-field>

          </ng-template>

        </e-tabitem>

      </e-tabitems>

    </ejs-tab>

this is not working, it's returning a blank screen. I using ngx-formly to build a dynamic form array. I want to display each item in a tab that i can remove by deleteing the item from the form array or add adding a new item 

[Balasubramanian Sattanathan]

Hi Takudzwa Mawarire, 

Greetings from Syncfusion Support. 

 

We have validated your reported scenario “Rendering Tabs using *ngFor” at our side and prepared a sample based on that using below highlighted code snippet. 

app.component.html : 

<e-tabitems> 

  <e-tabitem *ngFor="let tab of tabElements"> 

    <ng-template #headerText> 

      <div>{{tab.header}} </div> 

    </ng-template> 

    <ng-template #content> 

      <div>{{tab.content}} </div> 

    </ng-template> 

  </e-tabitem> 

</e-tabitems> 

app.component.ts: 

public tabElements: any = [ 

  { header: "Tab1", content: "Twitter" }, 

  { header: "Tab2", content: "FaceBook" }, 

  { header: "Tab3", content: "WhatApp" }, 

]; 

 

Sample: https://stackblitz.com/edit/angular-4le1hh-4tizez?file=app.component.ts 

Kindly try the above sample and let us know if you need further assistance. 

 

Regards, 

Balasubramanian S