Skip to main content
cngx-src documentation

CngxHierarchicalNav

DirectivePrimaryv0.1.0WCAG AA

projects/common/interactive/hierarchical-nav/hierarchical-nav.directive.ts

Import#

import { CngxHierarchicalNav } from '@cngx/common/interactive'

Description#

W3C-tree keyboard extension. Wires ArrowRight / ArrowLeft to a pluggable CngxHierarchicalNavStrategy; the default strategy implements the APG treeview pattern:

  • ArrowRight on a collapsed parent expands it. On an already-open parent it moves the active-descendant to the first child. On a leaf it is a no-op.
  • ArrowLeft on an open node collapses it. On a closed node (or leaf) with a parent it moves the active-descendant to the parent. On a root leaf it is a no-op.

Swap the strategy via CNGX_HIERARCHICAL_NAV_STRATEGY to customise the semantics (expand-only, never-traverse, exotic drag-drop flows) without forking the directive.

Attaches on the same element as CngxActiveDescendant; injects the AD instance (host: true, optional) and leaves vertical ArrowUp/Down, Home/End, and typeahead to AD's own handler. The two directives coexist without conflict - in vertical orientation AD's isNavKey branches for ArrowLeft/ArrowRight are already no-ops.

Outputs are informational and state-change-truthful: expand / collapse / movedToChild / movedToParent fire only when the strategy reports the corresponding action. A disabled target the strategy's attemptMove couldn't highlight never triggers a movedToChild / movedToParent emission.

<ul
  role="tree"
  aria-multiselectable="true"
  cngxActiveDescendant
  [items]="adItems()"
  [cngxHierarchicalNav]="treeController"
  tabindex="0"
></ul>

Metadata#

Host#

Index#

Inputs#

Required

The tree controller that owns expansion state. Required - without it the directive has nothing to reason about.

default { alias: 'cngxHierarchicalNav', }

Outputs#

collapse#string
output()

Emitted with the id that was just collapsed via ArrowLeft.

expand#string
output()

Emitted with the id that was just expanded via ArrowRight.

movedToChild#string
output()

Emitted with the id of the child the active-descendant moved to.

movedToParent#string
output()

Emitted with the id of the parent the active-descendant moved to.

Methods#

handleLeft#void
handleLeft(event: Event)
@parameventEvent
handleRight#void
handleRight(event: Event)
@parameventEvent

HostListeners#

EventHandler
(keydown.arrowleft)keydown.arrowleft()
(keydown.arrowright)keydown.arrowright()