### File

`packages/components/eui-tree/eui-dropdown-tree.directive.ts`

### Description

Directive that integrates eui-tree with eui-dropdown for tree-based selection in dropdown menus. Automatically updates dropdown trigger button label based on tree selection state. Supports custom button templates for flexible trigger rendering. Displays selected node labels as comma-separated text in the dropdown trigger. Must be applied to eui-dropdown component containing an eui-tree child.

### Basic Usage

Example :

    <eui-dropdown euiDropdownTree>
      <button euiButton>Select Items</button>
      <eui-dropdown-content>
        <eui-tree
          [nodes]="treeData"
          [isMultiselect]="true"
          (selectionChange)="onSelectionChange($event)">
        </eui-tree>
      </eui-dropdown-content>
    </eui-dropdown>

### With Custom Button Template

Example :

    <eui-dropdown euiDropdownTree [buttonTemplateRef]="customButton">
      <eui-dropdown-content>
        <eui-tree [nodes]="data" [isMultiselect]="true" />
      </eui-dropdown-content>
    </eui-dropdown>

    <ng-template #customButton let-label>
      <button euiButton euiPrimary>
        <eui-icon-svg icon="eui-tree" />
        {{ label || 'Select from tree' }}
      </button>
    </ng-template>

### Accessibility

- Dropdown trigger button maintains keyboard accessibility
- Selection state announced through button label updates
- Tree navigation remains accessible within dropdown

### Notes

- Button label automatically updates on selection changes
- Default label shows comma-separated selected node labels
- Custom template receives current label as $implicit context
- Works with both single and multi-select tree modes

### Implements

`AfterContentInit` `AfterViewInit`

### Metadata

Selector | `eui-dropdown[euiDropdownTree]`

### Index

###### Properties
euiTree
###### Inputs
buttonTemplateRef

### Inputs

buttonTemplateRef
Type : `TemplateRef<any>`
Template reference for custom dropdown trigger button rendering. Receives current selection label as template context ($implicit). Allows complete customization of dropdown trigger appearance.

### Properties

euiTree
Type : `EuiTreeComponent`
Decorators : `@ContentChild(EuiTreeComponent, {static: false})`

# results matching ""

# No results matching ""