Angular DatePipe com uso de localidade

Por padrão, Angular possui apenas informações de localidade para a localidade en-US. Quaisquer localidades adicionais precisam ser importadas para seu aplicativo.

Por exemplo, como isto para alemão no arquivo do módulo do seu aplicativo.

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

registerLocaleData(localeDE);

Se você tiver mais localidades, talvez queira analisar o carregamento dinâmico da localidade necessária sob demanda.

Você precisa importar as localidades adicionais

Podes tentar:

componente.html

<button (click)="switch('en-US')">Eng</button>
<button (click)="switch('de-DE')">Deu</button>

<span>{{ data.selDate | date: 'mediumDate':'': current }}</span>

app.module.ts

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

registerLocaleData(localeDe);
registerLocaleData(localeEn);

componente.ts

current: string = 'de-De';

switch(new: string): void {
  this.current = new;
}

NOTA: certifique-se de selDateque é uma data válida

StackBlitz

Abaixo está um exemplo do stackblitz, não criado por mim.

import { Component, OnInit } from '@angular/core';
import { DatePipe } from '@angular/common'

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
  providers: [DatePipe]
})
export class AppComponent implements OnInit {
  date = new Date();

  constructor(public datePipe: DatePipe) { }

  ngOnInit() {
    console.log(this.datePipe.transform(this.date, 'mediumDate', '', 'ar-AE'))
  }
}

HTML

<p>{{ date | date:'longDate':'':'ar-AE' }}</p>

stackblitz