How can I dynamically create a JQuery DropDownTree in an Angular application?

[Lani]

I'm currently using the jQuery DropDownTree since this component is not yet available in the Kendo Angular library. However, I need to create multiple DropDownTree components dynamically in an *ngFor loop in the template. I'm not sure how to do that since initializing a DropDownTree requires you to explicitly specify the element that will host it. Is this possible with DropDownTree?

 

I had originally created a support ticket for this but was told to ask here instead.

[Dimiter Topalov]

Hi Lani,

The most-straightforward approach to accomplish the outlined task seems to be to create a custom Angular wrapper-component that will internally initiallize the jQuery DropDownTree. It can also take configuration options like the data array as inputs for higher reusability. Then use this custom component as any other Angular component or DOM element in the host component's template.

Here is a sample implementation of the described approach:

https://stackblitz.com/edit/angular-ivy-uk8waa?file=src%2Fapp%2Fhello.component.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik