CngxTabLink
projects/common/tabs/tab-link.directive.ts
Import#
import { CngxTabLink } from '@cngx/common/tabs'
Description#
Turns a consumer <a routerLink> into a registered CngxTabHandle
inside a CngxTabNav.
Native parallel of CngxMatTabLink: in a
navigation bar the link IS the tab, so this per-anchor directive is the
registration seam - symmetric with how CngxTab registers each [cngxTab].
Carries no rendering and no click handler. Navigation is the native
routerLink (middle-click, open-in-new-tab and the hover URL all work),
gating is the link's own CanDeactivate, and the active marker comes from
the route: [cngxTabsRouteSync] on the nav reflects NavigationEnd onto the
presenter's activeId, which this link matches against its own id.
There is no select() call - invoking it would re-enter the commit path the
routed-nav model deliberately keeps dormant.
Error communication is reactive: aria-invalid plus the
--error skin glyph signal the state, and an injected screen-reader
descriptor span (referenced by a permanent aria-describedby) carries the
direct [error] message string so assistive tech reads why the link is
invalid.
<cngx-tab-nav cngxTabsRouteSync>
<a cngxTabLink id="overview" routerLink="overview">Overview</a>
<a cngxTabLink id="profile" routerLink="profile" [error]="profileInvalid">Profile</a>
</cngx-tab-nav>Metadata#
Host#
Index#
Inputs#
string | booleanDirect error flag for the link - true or a non-empty string marks it
invalid (the string doubles as the message). Mirrors CngxTab.error.
falseCngxErrorAggregatorContract | undefinedOptional rich error aggregator for the link.
Handle id. Set it to the link's route segment so the nav's
[cngxTabsRouteSync] reflects the active route onto this link via the
default (h) => [h.id] mapping. Defaults to a fresh uid when route-sync
is not used.
nextUid('cngx-tab-link-')Methods#
HostBindings#
| Binding | Expression |
|---|---|
[attr.aria-current] | selected() ? 'page' : null |
[attr.aria-invalid] | hasError() ? 'true' : null |
[attr.aria-describedby] | descriptorId() |
[class.cngx-tab-nav__link--active] | selected() |
[class.cngx-tab-nav__link--error] | hasError() |