Value Binding

Updated on Jun 25, 2026

The DropDownTree value can either be a primitive (strings, numbers, or other) or a complex value (objects).

To set the value, apply any of the following approaches:

• Use the value property. If the value is set through the value property, you have to hook up to the valueChange event and manually update the value of the value property.
• Use the ngModel value binding. If the value is set by the ngModel value binding, the framework will automatically update the corresponding field from the model after the value of the component changes.
• Use the formControlName value binding available in the Reactive forms. If the value is set by the formControlName value binding, the framework will automatically update the corresponding field from the form model after the value of the component changes.

The DropDownTree does not support the simultaneous usage of the value property and the ngModel value binding.

When binding the DropDownTree value, the component provides options for:

• Using primitive values (strings, numbers, or other)
• Using complex values (objects)

Primitive Values

If the value is of a primitive type, the valuePrimitive property needs to be set to true and dataItem must be provided. The value property of the dataItem will be associated with the valueField and the text to display will be extracted from the textField of the objects.

Primitive data types include:

• String
• Number
• Undefined
• Null

Change Theme

Theme

Loading ...

Heterogeneous Data Type

Heterogeneous data contains items of different types at different levels of the tree hierarchy. To handle this, supply string[] values for the valueField and textField properties and assign different field names at each tree level.

The following example demonstrates how to bind the DropDownTree to heterogeneous data.

When valueField and textField are string[], always specify valueDepth. If you do not provide a value for the field, the DropDownTree will look for the first property match from dataItem in the valueField which may result in an incorrect value match.

Change Theme

Theme

Loading ...

Object Values

If the DropDownTree is bound to a dataset of objects, its value will be an object of the same type.

The following example demonstrates how to bind the DropDownTree to a dataset of objects and configure it to use an object value.

Change Theme

Theme

Loading ...

The following table lists the valid configuration scenarios.

Data Type	Value	ValuePrimitive	ValueField	ValueDepth	DataItem
Hierarchical Homogenous	primitive	true	set	Not set	Set
Hierarchical Homogenous	complex	Not set	set	Not set	Not set
Hierarchical Heterogenous	primitive	true	set [Array]	Set	Set
Hierarchical Heterogenous	primitive	true	set [Array]	Not set (inferred)	Set
Hierarchical Heterogenous	complex	Not set	set [Array]	Set	Not set
Hierarchical Heterogenous	complex	Not set	set [Array]	Not set (inferred)	Not set
Flat	primitive	true	set	Not set	Set
Flat	complex	Not set	set	Not set	Not set

Suggested Links

• API Reference of the DropDownTree
• Data Binding