populating tabs in ngFor loop

[Aditya Murthy]

    HI All,

So i have been using tabs component for a requirement.

The data for the tab header comes from a variable in ts file which is an array of data.

So how do i user tabs in for loop for headers? and i need to provide a horizontal scroll for overflowing data

i tried the following code below:

<ejs-tab id="element" heightAdjustMode='Fill' overflowMode='Scrollable' width='300px'>

        <e-tabitems>

            <e-tabitem *ngFor="let message of headerText; index as i">

              <ng-template #headerText> 

                <span >{{message.text}}</span>

                <span *ngIf="i !== 4">10</span>

              </ng-template> 

            </e-tabitem>        

        </e-tabitems>

    </ejs-tab>

[Satheesh Kumar Balasubramanian]

Hi Aditya, 

  

Greetings from Syncfusion Support..! 

  

We have validated your reported query "populating tabs in ngFor loop" at our end and prepared a sample for your reference, which can be downloaded from the following link. 

https://stackblitz.com/edit/tabs-in-ngfor-loop?file=app.component.html 

  

app.component.html:  

    <ejs-tab id="tab_default" heightAdjustMode="Fill" (created)="onCreated($event)" width="400px"> 

      <e-tabitems> 

        <e-tabitem *ngFor="let message of headerText; index as i"> 

          <ng-template #headerText> 

            <span>{{message.text}}</span> 

            <span *ngIf="i !== 4">10</span> 

          </ng-template> 

          <ng-template #content> 

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

          </ng-template> 

        </e-tabitem> 

      </e-tabitems> 

    </ejs-tab> 

  

   

  

app.component.ts:  

export class AppComponent { 

  public headerText = [ 

    { text: "TAB1", content: "Tab 1 content" }, 

    { text: "TAB2", content: "Tab 2 content" }, 

    { text: "TAB3", content: "Tab 3 content" }, 

    { text: "TAB4", content: "Tab 4 content" }, 

    { text: "TAB5", content: "Tab 5 content" }, 

    { text: "TAB6", content: "Tab 6 content" } 

  ]; 

  

  onCreated(args: void) { 

    setTimeout(() => { 

      let tabObj = (document.querySelector(".e-tab") as any).ej2_instances[0]; 

      tabObj.refreshActElePosition(); 

      let toolbarObj = (document.querySelector(".e-toolbar") as any) 

        .ej2_instances[0]; 

      toolbarObj.refreshOverflow(); 

    }, 50); 

  } 

} 

  

   

  

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

Regards,

Satheesh Kumar B