clickable icon in tab

[Namita]

I need to give clickable icon just before the one of the tab.

We can give button as well.

Please help

[Pon Geetha A J]

From: Namita Singla  

  

I applied following code :-   

 <e-tabitem [header]="{ 'text': item.Label}">
        <ng-template #headerText>
          <div *ngIf="item.IsBranch">
            <img src={{branchIconImageSource}} (click)="fnBranchPopUp(item.Id)" alt="ToolTip" style="padding-right:5px" />
          </div>
          {{item.Label}}
        </ng-template>
         
          <ng-template #content>..... 

It is working for me but with one issue: 

 

select line is too long. It should come only under the first tab(NS1). 

Kindly look into this. 

[Balasubramanian Sattanathan]

Hi Namita, 

Greetings from Syncfusion Support. 

Query 1: 

We have validated your requirement “I need to give clickable icon just before the one of the tab.” at our side and prepared a sample based on your requirement by making use of the selected event like the below code snippet. 

onSelected(args: any) { 

  console.log("Tab item clicked") 

} 

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

 

Query 2: 

We have analyzed your reported problem “select line is too long. It should come only under the first tab(NS1).” at our side and we suggest you to use the below code snippet in the created event to overcome the problem. 

onCreated(args: void) { 

  setTimeout(() => { 

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

    tabObj.refreshActElePosition(); 

  }, 50); 

} 

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

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

  

Regards, 

Balasubramanian S

[Dinesh Kumar]

After using the below code, facing angular test case issue " TypeError: Cannot read property 'ej2_instances' of null

onCreated(args: void) { 

  setTimeout(() => { 

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

    tabObj.refreshActElePosition(); 

  }, 50); 

} 

[Satheesh Kumar Balasubramanian]

Hi Dinesh, 

  

Thanks for your update. 

  

We have validated your reported query "facing angular test case issue" and suggest you to use the below highlighted code in your project to resolve the reported issue. 

  

Sample: https://stackblitz.com/edit/angular-tab-created-issue?file=app.component.ts 

  

app.component.ts:    

import { TabComponent, EJ2Instance } from '@syncfusion/ej2-angular-navigations'; 

  

onCreated(args: void) { 

  setTimeout(() => { 

     let tabObj = (document.querySelector('.e-tab') as EJ2Instance) 

       .ej2_instances[0] as any; 

     tabObj.refreshActElePosition(); 

  }, 50); 

} 

  

Kindly try the above solution and let us know if this works at your end. If you still face any problem, please share the below details to reproduce the issue which will help us to validate the issue and provide prompt solution as soon as possible. 

• Share issue replicating sample if possible
• Share all tab related code snippets with it's test cases

Regards, 

Satheesh Kumar B