TreeView Templates not working with Angular 18

[Steve5877Work]

I'm trying to get the Treeview Templates to work without CSS being over ridden, but I can't even get the demo to work when updated for Angular 18.  https://stackblitz.com/edit/stackblitz-starters-d5ijdrhn?file=src%2Fmain.ts

When I try to follow the patterns in the demo, I'm not able to control layout.  My Flex settings are overridden to inline-block, or if I try to use block and float, the elements all stack vertically.  Demo:   https://ej2.syncfusion.com/angular/demos/#/tailwind3/treeview/template

[LeoLavanya Dhanaraj]

Hi Steve,

Greetings from Syncfusion support.

Based on the information you provided, we understand that you are experiencing an issue with rendering the TreeView with template support in Angular version 18. To investigate your issue, we prepared a sample using the code snippets you shared. However, the component is rendered correctly without any issues. For your reference, we have included the sample.

Output screenshot:

Also, we would like to inform you that after standardizing all components to the same major version and replacing the caret (^) with the tilde (~) symbol in the package.json file, the application is now functioning correctly. We recommend changing all dependencies to use the tilde symbol to avoid unintended major updates and to maintain version consistency.

Refer the shared details and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: Angular_18_589a10bb.zip

[Steve5877Work]

Thanks for confirming that, it helped me find a major impediment in my code, a typo in a file name. Most of the styles are now working.

However, I'm still having issues with flex, trying to far right align an arrow icon, controlling the background when hovering.  I'm not asking for specific fixes, just guidelines on working with your styles.

I've added a screen shot in the root folder of the zip, and I've updated application.html and application.css to show what I'm trying.

Attachment: Angular_18_589a10bb_8cc4fede.zip

[LeoLavanya Dhanaraj]

Hi Steve,

Based on the information you provided, we understand that you would like to customize the tree nodes in the TreeView component. We have modified the sample based on the screenshot you shared. Additionally, please refer to the links below for more details on node customization.

Documentation:

https://ej2.syncfusion.com/angular/documentation/treeview/template

https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels

https://ej2.syncfusion.com/angular/documentation/treeview/how-to/hover-multi-line-tree-node

Demo : https://ej2.syncfusion.com/angular/demos/#/tailwind3/treeview/template

Sample : https://blazorplayground.syncfusion.com/VDhetoXIUlCePVPS

[app.component.css]

.wrapper {

  margin-top: 20px;

  width: 100%;

  height: 100vh;

  /* Stretch to fill the viewport height */

  display: flex;

  justify-content: center;

  align-items: center;

}

 

.content {

  width: 100%;

  max-width: 400px;

  height: 100%;

  display: flex;

  flex-direction: column;

}

 

.treeparent {

  display: block;

  width: 100%;

  max-width: 450px;

  max-height: 320px;

  margin: auto;

  overflow: auto;

  border: 1px solid #dddddd;

  border-radius: 3px;

  background-color: aqua;

  /* Moved background style here */

}

 

.custom .e-list-item .e-fullrow {

  height: 72px;

}

 

.custom .e-list-item .e-list-text {

  line-height: normal;

}

 

.eimage {

  float: left;

  padding: 11px 16px 11px 0;

}

 

.ename {

  font-size: 16px;

  padding: 14px 0 0;

}

 

.ejob {

  font-size: 14px;

  opacity: 0.87;

}

 

.e-treeview .e-list-item.e-hover>.e-fullrow {

  background-color: blue;

}

 

.control_wrapper {

  max-width: 320px;

  margin: auto;

  border: 1px solid #dddddd;

  border-radius: 3px;

}

 

.e-treeview .e-list-text {

  width: 100%;

}

 

.nodetext {

  float: left;

}

 

.icon-container {

  float: right;

  margin-right: 15px;

  margin-top: 25px;

}

Refer the shared details and let us know if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[LeoLavanya Dhanaraj]

Please find the sample in the attached zip file below.

Attachment: src_7febcf8c.zip

[Steve5877Work]

Very helpful!  Thank you, great support.

[LeoLavanya Dhanaraj]

Hi Steve, 

Glad to know your issue has been resolved. Please get back to us for assistance in the future.