jQuery UI Widgets Forums Angular Tabs and Angular Components

This topic contains 1 reply, has 2 voices, and was last updated by  lqbweb 6 years, 3 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • Tabs and Angular Components #88442

    bds-tom
    Participant

    How would I go about creating a new tab for a data-bound list?

    My current example is as follows:

    TabDemo.component.html

    
    <angularTabs>
    <ul>
    <li *ngFor"let tab of tabCollection">{{tab.TabName}}</li>
    <li>+</li>
    </ul>
    <div *ngFor"let tab of tabCollection">
    {{tab.TabContent}}
    </div>
    <div>Create new tab</div> 
    </angularTabs>
    

    TabDemo.component.ts

    
    ...
     this.myTabsComponent.OnTabclick.subscribe((event) => {
          if (event.target.id !== this.myTabsComponent.host[0].id) {
            return;
          }
          let title = this.myTabsComponent.getTitleAt(event.args.item);
          if (title === '+') {
            // create tab
            this.tabService.addTab(<code>Tab ${event.args.item + 1}</code>).then(tabCreated => {
    			if(tabCreated){ 
    				this.loadTabs().then(tabs => { this.tabCollection = tabs; });
    			}
            });
          }
        });
    ...
    

    If i run the above, my tab component just resets. I have tried using the addTabAt method, but because my list is databound, this doesn’t work very well.

    Additionally, inside my tabs are additional components that need to be loaded (per tab), how is this possible?

    Tabs and Angular Components #88447

    lqbweb
    Participant

    Have a look at my post and my solution:

    http://www.jqwidgets.com/community/topic/problem-rendering-new-tabs-feature-request/

    You are experiencing I think this bug from angular2:

    https://github.com/angular/angular/issues/12283

    • This reply was modified 6 years, 3 months ago by  lqbweb.
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.