Tree View

<oge-tree-view> renders a hierarchy from either a flat parent-referencing array or nested children. It follows the WAI-ARIA APG treeview pattern — a roving tabindex over role="treeitem" rows, arrow / Home / End / type-ahead navigation and * to open a level — and expresses depth with aria-level / aria-posinset / aria-setsize over a flat DOM, which is what lets it virtualize.

APG pattern signals virtual scroll lazy load

Flat data

The canonical shape: rows carrying a parent reference. expandedKeys and selectedKeys are two-way models keyed by identity, so they survive reordering. The disabled node is skipped by both clicks and arrow keys.

keyExpr parentIdExpr [(expandedKeys)] selectionMode

Documents

Reports

Contracts

Photos

expandedKeys: 1 · selectedKeys: (none)

import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
import { OgeTreeView } from '@oge-ui/navigation';
import type { RowKey } from '@oge-ui/core';

interface Folder {
  id: number;
  parentId: number | null;
  name: string;
  hasItems?: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-view
      [items]="folders"
      keyExpr="id"
      parentIdExpr="parentId"
      displayExpr="name"
      selectionMode="single"
      [(expandedKeys)]="open"
      [(selectedKeys)]="picked"
    />
  `,
})
export class Demo {
  protected readonly folders: Folder[] = [
    { id: 1, parentId: null, name: 'Documents' },
    { id: 2, parentId: 1, name: 'Reports' },
    { id: 3, parentId: 2, name: 'Q1.pdf' },
  ];

  protected readonly open = signal<RowKey[]>([1]);
  protected readonly picked = signal<RowKey[]>([]);
}

Nested data

Point itemsExpr at the children field and the parent links are derived for you — core's flattenNestedTree normalizes the payload into the same single pipeline the flat shape uses.

itemsExpr

src

app

app.ts

app.routes.ts

main.ts

package.json

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeView } from '@oge-ui/navigation';

interface NestedFolder {
  id: number;
  name: string;
  children?: NestedFolder[];
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- nested payloads need only itemsExpr; the parent links are derived -->
    <oge-tree-view [items]="tree" itemsExpr="children" displayExpr="name" />
  `,
})
export class Demo {
  protected readonly tree: NestedFolder[] = [
    {
      id: 1,
      name: 'src',
      children: [{ id: 2, name: 'app', children: [{ id: 3, name: 'main.ts' }] }],
    },
  ];
}

Checkboxes & cascade

Checking a node cascades down to its descendants and normalizes up: a parent is checked only when every child is, and indeterminate whenever some are. The checkbox is an aria-hidden glyph and the state lives on the row as aria-checked — a real checkbox inside role="treeitem" would be a nested-interactive violation.

showCheckBoxes tri-state selectedKeysMode

Select all

Documents

Reports

Q1.pdf

Q2.pdf

Contracts

Photos

Holiday

Search

Matching is accent- and locale-insensitive (core's foldText), the ancestors of a hit are auto-expanded so it is reachable, and the matched substring is wrapped in <mark>. filterMode: 'fullBranch' also keeps a match's descendants.

searchEnabled filterMode highlight

Documents

Photos

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeView } from '@oge-ui/navigation';

interface Folder {
  id: number;
  parentId: number | null;
  name: string;
  hasItems?: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-view
      [items]="folders"
      displayExpr="name"
      [searchEnabled]="true"
      searchMode="contains"
      filterMode="withAncestors"
    />
  `,
})
export class Demo {
  protected readonly folders: Folder[] = [
    { id: 1, parentId: null, name: 'Documents' },
    { id: 2, parentId: 1, name: 'Reports' },
    { id: 3, parentId: 2, name: 'Q1.pdf' },
  ];
}

Lazy load on demand

Only the roots are bound; hasItemsExpr tells the tree which of them can expand. The first expand calls loadChildren and the engine renders a placeholder row until it resolves. Fetched children are folded into the index, so cascading selection reaches them.

loadChildren hasItemsExpr skeleton row

Server root

Backups

readme.txt

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeView } from '@oge-ui/navigation';

interface Folder {
  id: number;
  parentId: number | null;
  name: string;
  hasItems?: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-view
      [items]="roots"
      displayExpr="name"
      hasItemsExpr="hasItems"
      [loadChildren]="loadChildren"
    />
  `,
})
export class Demo {
  protected readonly roots: Folder[] = [
    { id: 1, parentId: null, name: 'Documents', hasItems: true },
  ];

  // a skeleton row shows while the promise is pending
  protected readonly loadChildren = (parent: Folder): Promise<Folder[]> =>
    fetch(`/api/folders?parent=${parent.id}`).then((r) => r.json());
}

Virtual scrolling

Because the tree renders a flat list with aria-level rather than nested groups, it can window the DOM. Built on core's OffsetTree + computeWindow; keyboard focus moves scroll the target into view first, since the row may not exist yet.

virtualScroll 10 000 nodes

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Item 8

Item 9

Item 10

Item 11

Item 12

Item 13

Item 14

Item 15

Item 16

Item 17

Item 18

Item 19

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeView } from '@oge-ui/navigation';

interface Folder {
  id: number;
  parentId: number | null;
  name: string;
  hasItems?: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <!-- every row must actually be itemHeight tall -->
    <oge-tree-view
      [items]="tenThousand"
      displayExpr="name"
      [virtualScroll]="{ itemHeight: 30 }"
      height="320px"
    />
  `,
})
export class Demo {
  protected readonly tenThousand: Folder[] = Array.from(
    { length: 10000 },
    (_, i) => ({ id: i + 1, parentId: null, name: `Item ${i + 1}` }),
  );
}

Drag & drop reparenting

Drag a node onto the middle of another to make it a child, or onto an edge to place it as a sibling. Hovering a collapsed parent opens it, Escape cancels, and a node can never be dropped into its own subtree. The tree emits itemReordered and leaves the data change to you.

allowDragging inside / before / after cycle guard

Documents

Reports

Q1.pdf

Q2.pdf

Contracts

Photos

Holiday

Custom node template

The item template replaces the built-in label. It renders inside the role="treeitem" row, so it must stay free of focusable controls.

ogeTreeItemTemplate

Documentslevel 0

Reportslevel 1

Contractslevel 1

Photoslevel 0

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { OgeTreeItemTemplate, OgeTreeView } from '@oge-ui/navigation';

interface Folder {
  id: number;
  parentId: number | null;
  name: string;
  hasItems?: boolean;
}

@Component({
  selector: 'demo-root',
  imports: [OgeTreeItemTemplate, OgeTreeView],
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <oge-tree-view [items]="folders" displayExpr="name">
      <!-- the TypeFor input is a pure type anchor: bind the same array you pass
           to [items] and let-item is typed as your row, not unknown -->
      <ng-template
        ogeTreeItemTemplate
        [ogeTreeItemTemplateTypeFor]="folders"
        let-item
        let-level="level"
      >
        <strong>{{ item.name }}</strong>
        <small>level {{ level }}</small>
      </ng-template>
    </oge-tree-view>

    <!-- the template renders inside role="treeitem", so it must not contain
         focusable controls — that would be a nested-interactive violation -->
  `,
})
export class Demo {
  protected readonly folders: Folder[] = [
    { id: 1, parentId: null, name: 'Documents' },
    { id: 2, parentId: 1, name: 'Reports' },
    { id: 3, parentId: 2, name: 'Q1.pdf' },
  ];
}