CngxHierarchicalNav
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#
Methods
Inputs
HostListeners
Inputs#
CngxTreeControllerThe tree controller that owns expansion state. Required - without it the directive has nothing to reason about.
{ alias: 'cngxHierarchicalNav', }Outputs#
Methods#
HostListeners#
| Event | Handler |
|---|---|
(keydown.arrowleft) | keydown.arrowleft() |
(keydown.arrowright) | keydown.arrowright() |