When I use Tab to bind dynamic data, after updating the datasource, the cssClass property doesn't work.

[techlandandyzhang]

When I use Tab to bind dynamic data, after updating the datasource, the cssClass property doesn't work.

https://stackblitz.com/edit/angular-wahcmj?file=app.component.ts

[Ruksar Moosa Sait]

Hi Techlandandyzhang,

We have modified your sample by mapping the tab items to their elements like the below code snippet.

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

    let
tabElements = [{ header: { 'text':'Test1' }, content:'1', cssClass:'classa' },

                          { header: { 'text':'Test2' }, content:'2', cssClass:'classb' },

                          { header: { 'text':'Test3' }, content:'3', cssClass:'classc' },

                       ];

tabObj.items = tabElements;

Sample: https://stackblitz.com/edit/angular-wahcmj-quhnhp?file=app.component.ts

Kindly try the above sample and let us know if this meets your requirement. 

Regards,

Ruksar Moosa Sait

[techlandandyzhang]

I need to add tabItem through data binding, cause I will draw other controls for tabItem depending on the values of this.data.

Is there any practical solutions to add cssClass?

[Satheesh Kumar Balasubramanian]

Hi Techlandandyzhang, 

  

We already resolved this problem and included the changes in our latest package(v19.4.56). So kindly upgrade the package version to the latest one(19.4.56) to get resolve this problem. Also, we have attached the sample for you reference. 

  

https://www.syncfusion.com/downloads/support/forum/173564/ze/TabItemsUpdate-1355438949 

  

Regards, 

Satheesh Kumar B