CngxNavLink
[cngxNavLink]
projects/common/interactive/nav/nav-link.directive.ts
Import#
import { CngxNavLink } from '@cngx/common/interactive'
Description#
Navigation link atom. Applied to <a> or <button> elements in a
sidebar or nav menu.
Sets a --cngx-nav-depth CSS custom property for indentation and
toggles an active class. Does NOT depend on @angular/router -
the consumer wires routerLinkActive or binds [active] manually.
With Router
<a cngxNavLink routerLink="/dashboard" routerLinkActive
#rla="routerLinkActive" [active]="rla.isActive">
Dashboard
</a>Manual active state
<a cngxNavLink [active]="currentRoute() === '/settings'" href="/settings">
Settings
</a>Nested (depth-based indentation)
<a cngxNavLink [depth]="0">Top level</a>
<a cngxNavLink [depth]="1">Nested</a>
<a cngxNavLink [depth]="2">Deep nested</a>Metadata#
Host#
Index#
Inputs#
The aria-current value when active. Screen readers announce this
to indicate the current page/step/location.
Common values: 'page' (default), 'step', 'location', 'true'.
'page'Nesting depth for indentation. Consumer sets manually - no ancestor injection.
0Instance Properties#
unknowntrue when the host <a> lacks an href attribute and needs tabindex="0"
role="link"for keyboard focusability.
Evaluated after the first render so Angular bindings such as [href] are
already resolved before the check runs.
signal(false)HostBindings#
| Binding | Expression |
|---|---|
[class.cngx-nav-link] | true |
[class.cngx-nav-link--active] | active() |
[attr.aria-current] | active() ? ariaCurrent() : null |
[attr.tabindex] | needsFocusFix() ? 0 : null |
[attr.role] | needsFocusFix() ? 'link' : null |
[style.--cngx-nav-depth] | depth() |