The per-group header
CngxTimelineDateHeader
Directivev0.1.0WCAG AA
projects/common/timeline/template-slots.ts
Import#
import { CngxTimelineDateHeader } from '@cngx/common/timeline'
Description#
The per-group header. Falls back to
CNGX_TIMELINE_CONFIG.labels.groupLabel, which formats the group's
start date in the browser locale.
The element this renders into is what the group's aria-labelledby
points at, so a header that renders nothing leaves the group unnamed.
<ng-template [cngxTimelineDateHeader]="events()" let-group>
<h3>{{ format(group.start) }} ({{ group.items.length }})</h3>
</ng-template>Metadata#
Index#
Inputs#
cngxTimelineDateHeader#
readonly T[] | undefined, readonly T[] | '' | undefinedinput()
Type carrier for the group's item type, never read at runtime. Bind the
same array the timeline gets and let-group types as
TimelineGroup<T>. See CngxTimelineItemTpl.cngxTimelineItem.
default
undefined, { transform: (value) => (typeof value === 'string' ? undefined : value) }, Instance Properties#
Methods#
ngTemplateContextGuard#
CngxTimelineDateHeaderContextStatic
ngTemplateContextGuard(_dir: CngxTimelineDateHeader<T>, ctx: unknown)@paramctx
unknown