CngxTabSubLabel
projects/common/tabs/slots/tab-sub-label.directive.ts
Import#
import { CngxTabSubLabel } from '@cngx/common/tabs'
Description#
Structural slot directive marking a tab's secondary label template.
Discovered by <cngx-tab-group> via contentChild on each
CngxTab and rendered as a stacked second line under the primary
label. \
Per-tab content, mirroring CngxTabLabel - the convenience
[subLabel] string input on CngxTab covers the plain-text case.
<div cngxTab id="bookmarks">
<ng-template cngxTabLabel>Bookmarks</ng-template>
<ng-template cngxTabSubLabel>45 saved</ng-template>
<ng-template cngxTabContent>...</ng-template>
</div>Metadata#
Dependencies#
TemplateRefinject()templateRefThe captured <ng-template>, projected by <cngx-tab-group> as the
tab's secondary label line under the primary label.
CngxTabSubLabel
The slot renders a secondary line under the primary tab label (a count, a short detail). It is part of the tab's name, not a separate control.
- It folds into the accessible name. The sub-label is spoken as part of the tab's name, so AT hears "Bookmarks, 45 saved". Keep it short and meaningful - it is read on every tab announcement, not decorative filler.
- It is not a focus stop. The sub-label is presentational text inside the tab button; it adds no tab stop and no interactive element.
- Mind redundancy. Since it joins the spoken name, avoid repeating what the primary label already says - the SR reads both back to back.