CngxTreeSelectNode

Directivev0.1.0WCAG AA

projects/forms/select/tree-select/tree-select-node.directive.ts

Info
API

Import#

import { CngxTreeSelectNode } from '@cngx/forms/select'

Description#

Override template for a single CngxTreeSelect row. Replaces the built-in twisty/indicator/label layout while keeping the panel's role="treeitem" wrapper and ARIA wiring intact.

Context: CngxTreeSelectNodeContext. Carries every reactive flag (expanded, selected, indeterminate, hasChildren, depth, disabled) plus closed toggleExpand / handleSelect callbacks so custom markup participates in commit / cascade / announce.

<cngx-tree-select [nodes]="tree" [(values)]="selected">
  <ng-template
    cngxTreeSelectNode
    let-node
    let-selected="selected"
    let-indeterminate="indeterminate"
    let-expanded="expanded"
    let-hasChildren="hasChildren"
    let-toggleExpand="toggleExpand"
    let-handleSelect="handleSelect"
  >
    @if (hasChildren) {
      <button type="button" tabindex="-1" (click)="toggleExpand()">
        {{ expanded ? '▾' : '▸' }}
      </button>
    }
    <cngx-checkbox-indicator
      [checked]="selected"
      [indeterminate]="indeterminate"
      (click)="handleSelect()"
    />
    <span>{{ node.label }}</span>
  </ng-template>
</cngx-tree-select>

Zero-logic holder - typed wrapper around TemplateRef, discovered via contentChild.

Metadata#

Selector: ng-template[cngxTreeSelectNode]
Export as: cngxTreeSelectNode

Index#

Properties

templateRef

Instance Properties#

templateRef#unknown

Readonly

inject<TemplateRef<CngxTreeSelectNodeContext<T>>>(TemplateRef)