Creating tab item dynamically and set the content to the tab is as URL?

[Maged Mikaeeel]

Hi

   I need to create a tab item dynamically and the content of that tab item to be URL to a form page?

Thanks,

Maged

[Arun Palaniyandi]

Hi Maged Mikaeeel,  

  

Thanks for Contacting Syncfusion support.  

  

Based on your requirement of dynamically adding the other components from another form page, we suggest your add them using the Angular <router-outlet> and then load them. 

  

  

<ejs-tab id="element" #element (selected)="select($event)" (created)=created($event) > 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]' content="#idv"></e-tabitem> 

    <e-tabitem [header]='headerText[1]' content="#idv" ></e-tabitem>  

  </e-tabitems> 

</ejs-tab> 

  

<div id="idv" > 

<router-outlet></router-outlet> 

</div> 

  

  

Ts: 

  

  public created(e){ 

  

this.tabObj.items.push({ header: { text:  'MyForm'  }, content: "#idv" });  // refer the router id 

  

(<any>this.tabObj).refresh(); 

  

} 

  

  

public select(e: any) { //based on the selection index the page will load with the dynamic components in it 

    if (e.selectedIndex == 0) {// selected index  

  

      this.router.navigateByUrl('/home'); 

  

    } 

    else if (e.selectedIndex == 1) { 

  

      this.router.navigateByUrl('/about'); 

  

    } 

      else if (e.selectedIndex == 2) { 

  

      this.router.navigateByUrl('/home'); 

  

    } 

  } 

  

  

  

  

Demo sample :  https://stackblitz.com/edit/github-lushmu-qrucby?file=src/app/app.component.ts 

 

   

You can also load the content dynamically through Ajax also. Please find the below UG link for more reference. 

https://ej2.syncfusion.com/angular/documentation/tab/howto.html#load-content-through-ajax 

 

 

Please check our shared sample and if you still have any query means, please let us know so that we would help you out better. 

  

  

Let us know if you have any further queries.   

  

Regards,  

Arun P.  

[Maged Mikaeeel]

Hi Maged Mikaeeel,  

  

Thanks for Contacting Syncfusion support.  

  

Based on your requirement of dynamically adding the other components from another form page, we suggest your add them using the Angular <router-outlet> and then load them. 

  

  

<ejs-tab id="element" #element (selected)="select($event)" (created)=created($event) > 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]' content="#idv"></e-tabitem> 

    <e-tabitem [header]='headerText[1]' content="#idv" ></e-tabitem>  

  </e-tabitems> 

</ejs-tab> 

  

<div id="idv" > 

<router-outlet></router-outlet> 

</div> 

  

  

Ts: 

  

  public created(e){ 

  

this.tabObj.items.push({ header: { text:  'MyForm'  }, content: "#idv" });  // refer the router id 

  

(<any>this.tabObj).refresh(); 

  

} 

  

  

public select(e: any) { //based on the selection index the page will load with the dynamic components in it 

    if (e.selectedIndex == 0) {// selected index  

  

      this.router.navigateByUrl('/home'); 

  

    } 

    else if (e.selectedIndex == 1) { 

  

      this.router.navigateByUrl('/about'); 

  

    } 

      else if (e.selectedIndex == 2) { 

  

      this.router.navigateByUrl('/home'); 

  

    } 

  } 

  

  

  

  

Demo sample :  https://stackblitz.com/edit/github-lushmu-qrucby?file=src/app/app.component.ts 

 

   

You can also load the content dynamically through Ajax also. Please find the below UG link for more reference. 

https://ej2.syncfusion.com/angular/documentation/tab/howto.html#load-content-through-ajax 

 

 

Please check our shared sample and if you still have any query means, please let us know so that we would help you out better. 

  

  

Let us know if you have any further queries.   

  

Regards,  

Arun P.  

Thank you for your reply.

Yes, I tried that and it did work, however, I had an issue with this work. Each time I navigate away from the tab to any other tab then come back again to the previous tab I found it reload again, it reloads all the contents. This has two issues, one the user will lose any entered data, second this will lead to bad user experience as it will slow down the flow.

Is there any way to keep the tab contents without reloading it each and every time the user clicks on another tab then click the previous tab without reloading it?

Thanks,

Maged

[Arun Palaniyandi]

Hi Maged Mikaeeel,  

  

Thanks for your update.  

  

As per the Angular <router-outlet> behavior, this will reload the given page and will reloads the page and all its contents . So to overcome this issue, we suggest you to not to use this <router-outlet> concept and then use the below solution. 

 

 

//set the content as different divs  

<ejs-tab id="element" #element (created)=created($event) > 

  <e-tabitems> 

    <e-tabitem [header]='headerText[0]' content="#idv1" ></e-tabitem> 

    <e-tabitem [header]='headerText[1]' content="#idv2" ></e-tabitem>  

  </e-tabitems> 

</ejs-tab> 

 

//initially set the div display as none  

<div id="idv1" style="display:none"> 

  <home></home>  //load your page here  

</div> 

<div id="idv2" style="display:none" > 

   <about></about>  

</div> 

<div id="idv3" style="display:none"> 

    <home></home> 

</div> 

 

 

So this will resolve your mentioned two issues i.e. one the user will lose any entered data, second this will lead to bad user experience as it will slow down the flow. And also satisfies your primary requirement of setting the content of the tab as URL and for the dynamically created tab too.  

 

Please find the modified sample below for your reference. 

https://stackblitz.com/edit/github-lushmu-zvz5hw?file=src/app/app.component.ts 

 

  

Please check our shared details and let us know if you have any further queries.   

  

Regards,  

Arun P.  

[Maged Mikaeeel]

Thanks for your reply.

This is better, but I still have one more issue using this fix.

If I want to open multiple tabs from the same control, for example, the second and third tab should open the home control, and each of them should have different instances and data entered by the user should be different, with this fix it won't work as they share the same instance also moving between the tabs will cause some issues like it will not show the tab contents in some cases!

[Arun Palaniyandi]

Hi Maged Mikaeeel,  

 

Thanks for your update.  

 

Query1:” If I want to open multiple tabs from the same control, for example, the second and third tab should open the home control, and each of them should have different instances and data entered by the user should be different,”

 

We have validated your query and found that even if we use the same home control for both the Tab items, the instances are different only. Hence the control instances are different on each tab item and wont share the same instances on each. Hence if you feel that our EJ2 components shares the same id on both item, we suggest you to render the component in the home page without a ID. As per our EJ2 base implementation, the components will render with an auto generated ID by default. This is because of the getUniqueId method which is handled in our EJ2 Angular source.

 

Demo sample: https://stackblitz.com/edit/github-lushmu-yjkn9u?file=src%2Fapp%2Fhome%2Fhome.component.html

 

 

Query2:” with this fix it won't work as they share the same instance also moving between the tabs will cause some issues like it will not show the tab contents in some cases!”

 

You have mentioned that “will cause some issues like it will not show the tab contents in some cases”. So can be more specific about this issue? And can you please explain what are the issues that your facing with this scenario?. Do you have any sample to replicate this issue. If so, please use our shared sample to replicate, so that we would analyze and provide you an prompt solution.

 

Please check the shared details, sample and let us know if you have any further queries.    

 

Regards, 

Arun P.

[Jayalatha Kathirvel]

Hi Maged Mikaeeel,  

 

Thanks for your update.  

 

Query1:” If I want to open multiple tabs from the same control, for example, the second and third tab should open the home control, and each of them should have different instances and data entered by the user should be different,”

 

We have validated your query and found that even if we use the same home control for both the Tab items, the instances are different only. Hence the control instances are different on each tab item and wont share the same instances on each. Hence if you feel that our EJ2 components shares the same id on both item, we suggest you to render the component in the home page without a ID. As per our EJ2 base implementation, the components will render with an auto generated ID by default. This is because of the getUniqueId method which is handled in our EJ2 Angular source.

 

Demo sample: https://stackblitz.com/edit/github-lushmu-yjkn9u?file=src%2Fapp%2Fhome%2Fhome.component.html

 

 

Query2:” with this fix it won't work as they share the same instance also moving between the tabs will cause some issues like it will not show the tab contents in some cases!”

 

You have mentioned that “will cause some issues like it will not show the tab contents in some cases”. So can be more specific about this issue? And can you please explain what are the issues that your facing with this scenario?. Do you have any sample to replicate this issue. If so, please use our shared sample to replicate, so that we would analyze and provide you an prompt solution.

 

Please check the shared details, sample and let us know if you have any further queries.    

 

Regards, 

Arun P.

 I need to create a tab item dynamically and the content of that tab item should not be added to URL.

Steps:

1. Sidebar tab

2. On selecting sidebar item, a tab should be loaded with tab header and tab content

3. Component - SidebarComponent, TabComponent, ContentComponent1

4. URL - there should not be any changes in URL

[Vinitha Devi Murugan]

Hi Maged,

Thank you for your update.

We can create a tab item dynamically through addTab public method of our Tab component. Please refer the below UG link for more information.  

UG Link: https://ej2.syncfusion.com/angular/documentation/tab/how-to/load-tab-items-dynamically/

API Link: https://ej2.syncfusion.com/angular/documentation/api/tab#addtab 

Kindly try the above link and get back to us if you need any further assistance.

Regards,

Vinitha