Skip to main content
cngx-src documentation

CngxMatTabLink

DirectivePrimaryv0.1.0WCAG AA

projects/ui/mat-tabs/mat-tab-link.directive.ts

Import#

import { CngxMatTabLink } from '@cngx/ui/mat-tabs'

Description#

Registers an <a mat-tab-link> anchor as a CngxTabHandle with the enclosing CngxMatTabNav presenter. mat-tab-nav-bar has no MatTab to hang a handle on (the links are the tabs), so this per-link directive is the registration seam - symmetric with how CngxTab registers in the cngx-native path and how CngxMatTabsRegistry registers each <mat-tab>.

Registration order follows DOM order (Angular instantiates content directives top-to-bottom), so the presenter's tabs() index aligns with nav.querySelectorAll('.mat-mdc-tab-link') - the index the decoration projectors correlate against.

Gating is native: the link's routerLink runs CanDeactivate directly, so this directive installs no commit-action. The active index follows the route through [cngxTabsRouteSync] on the nav, which matches each handle's id (set to the route segment) against the URL.

Metadata#

Index#

Inputs#

error#string | boolean
input()

Direct error flag for the link - true or a non-empty string marks it invalid (the string doubles as the message). Mirrors CngxTab.error and [cngxMatTabErrorFlag].

default false
input()

Optional rich error aggregator for the link.

input()

Handle id. Set it to the link's route segment so the nav's [cngxTabsRouteSync] reflects the active route onto this tab via the default (h) => [h.id] mapping. Defaults to a fresh uid when route-sync is not used.

default nextUid('cngx-mat-tab-link-')
label#string | undefined
input()

Accessible label fed to the live-region announcer.

Methods#

ngOnInit#void