clickable icon in tab

Question

I need to give clickable icon just before the one of the tab.We can give button as well.Please help

Balasubramanian Sattanathan · Accepted Answer

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

Pon Geetha A J · Answer

From: Namita Singla I applied following code :-

..... 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.

Dinesh Kumar · Answer

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 · Answer

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