weird issue with angular2 tab component

[red-arrowParticipant]

I am just starting with the angular2 jqwidgets and having a weird problem with the tab component. After starting a new project with angular-cli I integrated the menu and the tab component. Now I have a page with jqwidgets menu and tabs, very nice. The problem is when I try to replace the demo tab titles with the titles of my application. When the page is reloaded the tab component has disappeared, there is just a list with my titles. Looking into the chrome console the following stack appears:
"TypeError: Cannot read property 'setAttribute' of undefined↵ at b.(anonymous function).createInstance (http://localhost:4200/assets/scripts/jqxtabs.js:7:3145)↵ at Object.a.jqx.applyWidget (http://localhost:4200/assets/scripts/jqxcore.js:7:51343)↵ at HTMLDivElement.<anonymous> (http://localhost:4200/assets/scripts/jqxcore.js:7:55564)↵ at Function.each (http://localhost:4200/assets/scripts/jquery-1.11.1.min.js:2:2973)↵ at m.fn.init.each (http://localhost:4200/assets/scripts/jquery-1.11.1.min.js:2:835)↵ at m.fn.init.a.fn.(anonymous function) [as jqxTabs] (http://localhost:4200/assets/scripts/jqxcore.js:7:55487)↵ at Object.createInstance (http://localhost:4200/assets/scripts/jqxcore.js:7:44481)↵ at jqxTabsComponent.createWidget (http://localhost:4200/main.bundle.js:44510:39)↵ at TabComponent.ngAfterViewInit (http://localhost:4200/main.bundle.js:61136:21)↵ at _View_AppComponent0.detectChangesInternal (/AppModule/AppComponent/component.ngfactory.js:66:71)"
I restore the demo titles and the tabs appear again. It is a trivial copy and paste of a few li tags. How come nothing else changing, one minute it works, replace the demo li tags with my own tags, again I get a simple list and the above error. After banging my head on the wall a few minutes, I could see the light. The application chockes after changing the number of the li tags, not their contents. The demo tab template has five titles, my requirement is six titles. Easy to test. I replace the demo li tags with five of my own. Everything is ok, now. Then I try with four li tags, again it is ok. It looks like there is a max length property, but I couldn’t find it on the docs. What am I missing ?

[Peter StoevKeymaster]

Hi red-arrow,

There is no max length in the Angular 2 Tabs Component. 6 LI tags for the Tabs titles require 6 DIV tags for the Tabs content. Otherwise, it will raise an error as in your case.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[juniorParticipant]

Hello Peter Stoev,

How to add Tab and Tabpage dynamically in angular 2 Tab component?
Thanks.

[Ivo ZhulevParticipant]

Duplicated Post:
http://www.jqwidgets.com/community/topic/angular-2-tab-and-treeview-component/

[Author]

Posts