Formatting dates

How to render a date in the user’s language through FormatDateService.

Mechanics and the enum types: features/format-date.

Before you start

The service registers Angular locale data for every language transloco declares, and it only knows de and en. If your app’s availableLangs contains anything else, injecting this service throws. Use Angular’s formatDate or DatePipe directly in that case.

The active language

constructor(private formatDate: FormatDateService) {}

readonly created = this.formatDate.getDateTimeByCurrentLanguage(new Date());
// 'Mittwoch, 29. Juli 2026'  (de)

The format defaults to 'fullDate'. Pass one of the predefined formats, or a custom pattern:

this.formatDate.getDateTimeByCurrentLanguage(date, DateFormat.ShortDate); // '29.07.26'
this.formatDate.getDateTimeByCurrentLanguage(date, 'short'); // autocompletes
this.formatDate.getDateTimeByCurrentLanguage(date, 'dd.MM.yyyy HH:mm'); // custom

Both the enum and its string value are accepted, and arbitrary patterns still compile — the parameter type keeps autocomplete without closing the door on custom patterns. Pattern syntax is Angular’s; see the wiki page on custom format options.

Following a language switch

The synchronous methods format once. For text that stays on screen across a language change, use the observable variant:

readonly created$ = this.formatDate.getDateTimeByCurrentLanguage$(this.order.createdAt, 'medium');

<span>{{ created$ | async }}</span>

It re-emits on every langChanges$, so the rendered date follows the language. The date itself is captured when you call the method — this is not a live clock.

Forcing a locale or a time zone

this.formatDate.getDateTimeByFormat(date, DateFormat.LongDate, 'en');
this.formatDate.getDateTimeByFormat(date, 'medium', 'de', TimeZoneOffset.UTC_PLUS_0000);

getDateTimeByFormat is the only method that takes a locale; it defaults to the active language, so the third argument is only needed to override it. A locale you pass must still be one whose data was registered — in practice 'de' or 'en'.

Time zones are offsets only: TimeZoneOffset.UTC_PLUS_0200, not 'Europe/Berlin'. The type enforces this. Offsets do not follow daylight saving time, so a fixed offset will be an hour off for half the year — if that matters, convert the date before formatting.

Verify

The /format-date route of the test app is the playground, reachable from the overview at /.