import { Component } from '@angular/core';
import { WrDateStamp } from 'ngwr/date-stamp';
@Component({ imports: [WrDateStamp] })
export class MyComponent {}Date Stamp
A date over a time, for a table cell.
Installation
Import the class, and @use the entry point in your global styles. Nothing warns you when the @use is missing.
Basic
Takes a Date, epoch milliseconds or a string, read as wrDate reads it. Both lines sit in one <time> with the instant in datetime.
<wr-date-stamp [value]="order.createdAt" />
<wr-date-stamp value="2026-11-12T08:45:00Z" />In a table
A [wrTableCell] template puts a stamp in a column. The digits are tabular, so a column lines up.
<wr-table [columns]="columns" [items]="shifts">
<ng-template wrTableCell="createdAt" let-value>
<wr-date-stamp [value]="value" />
</ng-template>
<ng-template wrTableCell="closedAt" let-value>
<wr-date-stamp [value]="value" />
</ng-template>
</wr-table>Formats
dateFormat and timeFormat take a named key or a token string, as wrDate does.
<wr-date-stamp [value]="at" dateFormat="longDate" timeFormat="time24hSeconds" />
<wr-date-stamp [value]="at" dateFormat="d MMM yyyy" timeFormat="HH:mm" />Time zone and language
An instant is shown in the display time zone and both lines are written in the interface language. They follow both at runtime.
import { provideWr } from 'ngwr';
import { withDates } from 'ngwr/date';
import { provideWrI18n } from 'ngwr/i18n';
providers: [
provideWrI18n({ defaultLocale: 'ru', availableLocales: ['ru', 'en'] }),
provideWr(withDates({ timeZone: 'Asia/Almaty' })),
],
// <wr-date-stamp value="2026-11-12T08:45:00Z" />
// 12 нояб. 2026 г.
// 13:45Date only
A date-only string is a day: it shows the date line alone and does not shift with the zone.
<wr-date-stamp value="2026-11-12" />Empty
null, undefined, '' and a value that is not a date show emptyLabel. The copyValue.empty catalog key changes it everywhere, for wr-copy-value too.
<wr-date-stamp [value]="null" />
<wr-date-stamp [value]="shift.closedAt" emptyLabel="not closed" />API
| Name | Description | Type | Default |
|---|---|---|---|
value | The moment shown: a Date, epoch milliseconds, or a string wrParseDate reads. null, undefined, '' and a value that is not a date are empty. | Date | string | number | null | undefined | null |
dateFormat | Format of the first line: a named key or a token string ('d MMM yyyy'). | WrDateFormat | string | 'mediumDate' |
timeFormat | Format of the second line: a named key ('time24hSeconds') or a token string ('HH:mm'). | WrDateFormat | string | 'time' |
emptyLabel | What stands in for an empty value. Falls back to copyValue.empty, then '-'. | string | null | null |
CSS variables
Set these on the element itself, with a rule more specific than its Declared on selector. In a global stylesheet, put a class of yours on an ancestor it really has: <body> for an overlay panel, which renders outside your markup. In a component stylesheet the selector alone works, but only for an element in that component's own template. A value on a wrapper or :root is shadowed, because ngwr/date-stamp declares each default on its own element.
| Variable | Default | Declared on |
|---|---|---|
--wr-date-stamp-date-color | inherit | .wr-date-stamp |
--wr-date-stamp-empty-color | var(--wr-color-on-surface-muted) | .wr-date-stamp |
--wr-date-stamp-gap | 0 | .wr-date-stamp |
--wr-date-stamp-line-height | var(--wr-text-sm-leading) | .wr-date-stamp |
--wr-date-stamp-time-color | var(--wr-color-on-surface-muted) | .wr-date-stamp |
--wr-date-stamp-time-font-size | var(--wr-text-sm) | .wr-date-stamp |
Dependencies
| Built on | ngwr/date |
|---|
See also
Pipe wrDateFormat a date with a named preset or a token string.Docs ConfigurationSet app-wide options at bootstrap.Component TableRows of data with sorting, filtering, paging and custom cells.Component Copy ValueA value with a copy button beside it.Component DescriptionsA read-only list of labels and their values.