Componente

TreeSelect

Select jerárquico para datos anidados, permisos y taxonomías con búsqueda y selección múltiple opcional.

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

Área

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 {}