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

<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

<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