Date formatting

FormatDateService is a thin wrapper around Angular’s formatDate() whose only real job is defaulting the locale to transloco’s active language. It exists so that platform scripts and components format dates through one typed entry point instead of importing @angular/common and repeating getActiveLang() everywhere.

providedIn: 'root' (format-date.service.ts:21).

Methods

Method	Locale	Returns
getDateTimeByFormat(…)	argument, defaults to active	string
getDateTimeByCurrentLanguage(…)	always the active language	string
getDateTimeByCurrentLanguage$(…)	the language at emit time	Observable<string>

All three forward straight to formatDate(date, format, locale, timeZone) — there is no additional formatting logic. The $ variant maps TranslocoService.langChanges$ (format-date.service.ts:82), so a rendered date re-emits in the new language on a switch. The two synchronous variants read the language once and do not.

format defaults to 'fullDate' on the two ByCurrentLanguage methods and is required on getDateTimeByFormat.

The autocomplete pattern

Three enums describe the supported values (format-date.model.ts): DateFormat (Angular’s twelve predefined formats), TimeZoneOffset (every ±HHMM offset from -1200 to +1400), and SupportedLanguages (de, en).

The parameters are typed `${DateFormat}` | (string & {}). The template-literal half makes the editor list every enum member; the string & {} half keeps arbitrary strings assignable without collapsing the union — so 'shortDate' autocompletes and 'yyyy-MM-dd HH:mm:ss.SSS' still compiles. Enum members are accepted too, since a string enum is assignable to its own literal type.

timeZone is the exception: it is typed `${TimeZoneOffset}` with no escape hatch, so only the listed offsets are accepted. Named zones such as 'Europe/Berlin' do not compile — and would not work anyway, since formatDate only understands offsets.

Locale registration

Angular’s formatDate throws for a locale whose data was not registered. The constructor registers the locales up front, driven by what transloco declares (format-date.service.ts:27):

this.translocoService.getAvailableLangs().forEach((lang) => localeMap[lang]());

localeMap holds one registration thunk per SupportedLanguages member (format-date.service.ts:16), so @angular/common/locales/de and /en are statically imported and land in the bundle whether or not the app uses both.

Limitation — an unsupported language throws at construction

localeMap[lang] is undefined for anything outside SupportedLanguages, and the call then throws TypeError: localeMap[lang] is not a function. Because this happens in the constructor of a root service, the first injection anywhere in the app fails.

So an app whose transloco availableLangs contains, say, 'fr' cannot use FormatDateService at all — not even for 'de' dates. getAvailableLangs() can also return AvailableLangs objects rather than strings when configured that way, which fails the same way.

Adding a language means adding it to SupportedLanguages and to localeMap.

Related

• guides/formatting-dates
• The /format-date route of the test app is the live playground.