Selection

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeTreeList } from '@oge-ui/tree-list';
import type { RowKey } from '@oge-ui/core';

@Component({
  selector: 'demo-root',
  imports: [OgeTreeList],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-list
      [data]="org"
      keyExpr="id"
      parentIdExpr="parentId"
      [autoExpandAll]="true"
      selectionMode="checkbox"
      [selectionRecursive]="true"
      [(selectedKeys)]="selectedKeys"
    />
  `,
})
export class Demo {
  readonly org = [
    { id: 1, parentId: null, name: 'Aylin Koç', title: 'CEO', office: 'İstanbul', headcount: 4 },
    { id: 2, parentId: 1, name: 'Baran Ateş', title: 'VP Engineering', office: 'İstanbul', headcount: 2 },
    { id: 3, parentId: 2, name: 'Ceren Aksu', title: 'Team Lead', office: 'İzmir', headcount: 1 },
    { id: 4, parentId: 3, name: 'Deniz Ünal', title: 'Engineer', office: 'İzmir', headcount: 0 },
    { id: 5, parentId: 1, name: 'Elif Barış', title: 'VP Sales', office: 'Ankara', headcount: 0 },
  ];

  protected readonly selectedKeys = signal<RowKey[]>([]);
}