Component

TreeSelect

Hierarchical select for nested data, permissions and taxonomy fields with search and optional multiple selection.

import { NeuTreeSelectComponent, NeuTreeSelectNodeDirective, NeuTreeSelectSelectedDirective, NeuTreeSelectHeaderDirective, NeuTreeSelectFooterDirective, NeuTreeSelectEmptyDirective } from '@neural-ui/core/tree-select';

Area

import { NeuTreeSelectComponent, NeuTreeSelectNodeDirective, NeuTreeSelectSelectedDirective, NeuTreeSelectHeaderDirective, NeuTreeSelectFooterDirective, NeuTreeSelectEmptyDirective } from '@neural-ui/core/tree-select';

@Component({
  imports: [NeuTreeSelectComponent, NeuTreeSelectNodeDirective, NeuTreeSelectSelectedDirective, NeuTreeSelectHeaderDirective, NeuTreeSelectFooterDirective, NeuTreeSelectEmptyDirective],
  template: `
    <neu-tree-select label="Area" [nodes]="nodes" [clearable]="true">
      <ng-template neuTreeSelectSelected let-node>{{ node?.label }}</ng-template>
      <ng-template neuTreeSelectHeader><strong>Product areas</strong></ng-template>
      <ng-template neuTreeSelectNode let-node let-selected="selected" let-toggle="toggle">
        {{ selected ? '●' : '○' }} {{ node.label }}
        <button type="button" (click)="toggle()">Toggle</button>
      </ng-template>
      <ng-template neuTreeSelectEmpty>No matching area</ng-template>
      <ng-template neuTreeSelectFooter><small>Pick an area</small></ng-template>
    </neu-tree-select>`
})
export class ExampleComponent {}