Tree Select
Choose departments, categories, folders, or other hierarchical values in a form. Tree Select combines an accessible tree popup with search, single or multiple selection, and lazy loading.
Import TreeSelect from @ngstarter-ui/components/tree-select. Each node has a unique string or number value, a label, and optional children. Use immutable node arrays. Search keeps ancestors visible.
Single selection and reactive forms
Use leavesOnly to select categories at the last level. Open with Enter, Space, or an arrow key. Inside the tree, arrows navigate and expand; Enter or Space selects. Escape or Tab closes the popup and restores focus.
Selected: None
Multiple selection
With multiple, the form value is an array. Cascading selection writes enabled loaded leaf values, and parents show checked or mixed state. Disabled branches and their descendants cannot be selected. Set [cascade]="false" for independent node selection.
Selected: read
Load children on expansion
Mark unloaded branches with hasChildren: true and provide loadChildren. It accepts arrays, promises, or observables. Errors show a Retry action and emit loadError. Search and cascading selection operate on loaded nodes; expand branches before selecting their descendants. No remote search is performed.