Dynamic tabs with content

[Me]

Hello,

I need to add tabs and tab content dynamically into tabPanel. How can I achieve that?

                            <ej-tab id="tabsample">
                                <ul>
                                    <li><a rel='nofollow' href="#home" >Home</a></li>
                                </ul>
                                <div id="home" style="background-color: deeppink">
                                    <h1>Welcome! This is Home tab..</h1>     
                                </div> 
                            </ej-tab>

I can add tab dynamically like this:             
                              var tabObj = $("#tabsample").data("ejTab");
                              tabObj.addItem("#dynamicTab", "dynamic content", 2, "myClass", 2);

But how can I add content (dynamically)?
                               <div id="dynamicTab">
                                    <h1>Welcome Dynamic tab! </h1>     
                                </div> 

Also, I need that heightAdjustMode would be ''fill' for each tab.


P.S. Content can't be hardcoded into HTML. I need to be able to add it dynamically.

[Gopi Govindasamy]

Hi Me 

We have checked your scenario for “new tab and content added dynamically in angular 2”, We can add the tab dynamically by using addItem() public method.  

 

Add code snippet here 

 

Sample Link: http://www.syncfusion.com/downloads/support/forum/128048/ze/Angular_Tab1818993492.zip 

  

Regards, 

Gopi G   

[Me]

Hey, thanks! However it works only for simple html, but not for angular / syncfusion components. How could I add something like this:

var content= "<div id='dynamicTab'> <myCustomList></myCustomList> </div>";

Also, is there a way to remove that HTML after tab is closed? Moreover can I specify particular tab to have / not have close button?


P.S. A bit disappointment that Syncfusion haven't implemented such an important functionality for TabPanel :/ 

[Gopi Govindasamy]

Hi Me,    

  

We have checked your scenario. You can dynamically add ej component and the provided content to new tab items. We have prepared a sample for your requirement and attached the sample link below.    

  

Sample Link: http://www.syncfusion.com/downloads/support/forum/128048/ze/angular2_tab-426748241.zip 

  

In the tab control, we have provided showCloseButton property to show the close button icon. If you click the icon, the particular tab will be closed and the tab will be removed from HTML attributes also removed automatically. By default, all tabs show close icon. If you need to show the close icon in a particular tab item only, you have to customize this. We have customized the tab in the above sample.    

  

We have implemented most of the feature. Please share the expected feature in tab control, so that we can consider it and implement it.    

  

Regards,    

Gopi G.   

[Me]

Hello again.

Your solution kinda works, but it's not fully what I need. It only works with HTML and Syncfusion component. I would like to write a wrapper for ejGrid and add that component (dynamically, which will also be lazy loaded). However, as far as I saw I'm not able to do that, unless I use hard-coded divs.

I tried to use this method:

Tabpanel:

Hard coding containers for dynamic load:

Creating Tab:

Lazy loading component and inserting into container:


Have in mind I'm using SystemJS for that. That works, but only until I try to close a tab. When I close tab my created hard-coded divs are also removed and I'm not able to reuse them.
1. Is there a way to prevent content div removal after tab close button is clicked? (Tab itself still has to hide) 
2. After tab is cloused with id tabContent3, I'm not anymore able to create tab with same ID, why is that? :o

 tabObj.addItem('tabContent3', 'tabContent9', 6, null, 'tabContent3'); Create tab like this, close it and then try to create it again.

I get this error: