CngxTime

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/common/display/time/time.component.ts

Info
API

Import#

import { CngxTime } from '@cngx/common/display'

Description#

Locale-aware <time> display atom. Renders a machine-readable datetime attribute (ISO 8601) plus a human string in one of two modes: absolute (via Intl.DateTimeFormat) or relative (via Intl.RelativeTimeFormat, e.g. "3 days ago"). Formatting resolves against the injected LOCALE_ID - English out of the box, locale-driven when the app provides one; no hardcoded strings.

Relative mode is render-time, not live-ticking: it recomputes when [date] changes, not on a timer, so "2 minutes ago" does not self-update. A consumer that needs a live clock re-binds [date]; a timer-driven variant is an explicit non-goal for the atom.

<cngx-time [date]="publishedAt()" mode="relative" />
<cngx-time [date]="invoice.due" [format]="{ dateStyle: 'long' }" />

Metadata#

Selector: cngx-time
Export as: cngxTime
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./time.component.css

Index#

Inputs

date format mode

Derived State

formatted instant iso

Inputs#

date#Date | string | number

input()Required

Instant to render. Accepts a Date, an ISO string, or an epoch-ms number.

format#Intl.DateTimeFormatOptions | undefined

input()

Intl.DateTimeFormatOptions for absolute mode; ignored in relative mode.

mode#"absolute" | "relative"