Angular 5 - date - language

Question

I use this expression in my Angular 5 application:

{{ viewDate | date:'MMM' }}

The month abbreviation is shown in English. How do I switch the output to German?

[SOLVED] https://angular.io/api/core/LOCALE_ID

Solution

As you pointed in your edit out already you have to define a locale within your app. The documentation for the DatePipe states

Formats a date according to locale rules.

The pipe has to be used like so

{{ date_expression | date[:format[:timezone[:locale]]] }}

As you can see, the pipe accepts a format, timezone and locale parameter (besides the actual date that is to be parsed). Reading further, documentation states

locale is a string defining the locale to use (uses the current LOCALE_ID by default)

Here's a read up on how the LOCALE definition works. You probably want to localize your entire application in German. First, you want to import the German locales within your AppModule.

import { registerLocaleData } from '@angular/common';
import localeDe from '@angular/common/locales/de';

registerLocaleData(localeDe);

Now you can use the locale as usual

@NgModule({
  // ...
  providers: [{provide: LOCALE_ID, useValue: 'de'}]
})
export class AppModule{}

Your initial expression {{viewDate | date:'MMM'}} should now output the german localized abbreviated month.