import { Component } from '@angular/core';
import { WrDate } from 'ngwr/pipes';
@Component({ imports: [WrDate] })
export class MyComponent {}wrDate
Format a date with a named preset or a token string.
Installation
Import the class. This entry point has no stylesheet.
Named keys
Six presets that follow the app locale. With no argument, shortDate.
{{ now | wrDate }} <!-- shortDate (default) -->
{{ now | wrDate: 'mediumDate' }} <!-- Jun 12, 2026 -->
{{ now | wrDate: 'time' }} <!-- 10:51 AM -->
{{ now | wrDate: 'mediumDateTime' }} <!-- Jun 12, 2026, 10:51 AM -->Seconds and hour cycle
time and shortDateTime take a 12h or 24h suffix to pin the clock, then Seconds to add seconds. New in v15.
{{ now | wrDate: 'time24h' }} <!-- 10:51 -->
{{ now | wrDate: 'time12hSeconds' }} <!-- 10:51:07 AM -->
{{ now | wrDate: 'shortDateTimeSeconds' }} <!-- 6/12/2026, 10:51:07 AM -->Token strings
Tokens: yyyy yy MMMM MMM MM M dd d HH H hh h mm ss a, plus 'quoted' text. There is no weekday token.
{{ now | wrDate: 'dd.MM.yyyy' }} <!-- 12.06.2026 -->
{{ now | wrDate: 'd MMMM yyyy' }} <!-- 12 June 2026 -->Playground
Oct 28, 2026, 09:18 AM
{{ now | wrDate: 'mediumDateTime' }}Customize
Format
API
| Name | Description | Type | Default |
|---|---|---|---|
wrDate | Formats through WrDateAdapter: the native one, or your own. | (value: Date | string | number | null | undefined, format: WrDateFormat | string = 'shortDate') => string | — |