core [Question]How to use ngx-translate for date DatePipe?

I have an application that is running in two language ( I can change and choose the language that I want by using i18n) English / French.

At the moment I can get the date only in English even if I select the French Language.


       <div class="information">
                  {{ information.date | information:'EEEE'}} {{information.date | date:'d'}} {{ information.date | date:'MMMM'}} {{ information.date |
                  date:'yyyy'}}
            </div>

Is there a way to change the date depending on what language I selected ?

Jul 19 '18 12:07 AlFalahTaieb

Any help on that?

Sep 18 '18 15:09 clegeard

Any news ?

Nov 27 '18 23:11 nkCreation

any news?

Dec 09 '18 01:12 FiReBlUe45

app.module.ts

// https://angular.io/guide/i18n#i18n-pipes
import { registerLocaleData } from '@angular/common';
import localeFr from '@angular/common/locales/fr';

export class AppModule {
    constructor() {
        registerLocaleData(localeFr, 'fr');
    }
}

app.component.html

<!-- https://angular.io/api/common/DatePipe -->
<div class="date">{{ articleDate | date: 'MMM d, y':undefined:locale }}</div>

app.component.ts

locale: string;
constructor(private _translateService: TranslateService) { }

ngOnInit() {
        this.locale = this._translateService.currentLang;
        // don't forget to unsubscribe!
        this._translateService.onLangChange
            .subscribe((langChangeEvent: LangChangeEvent) => {
                this.locale = langChangeEvent.lang;
            })
    }

Dec 14 '18 18:12 j-langlois

Just modifying @j-langlois answer. Following solution would work in entire application.

app.module.ts

import localeEn from '@angular/common/locales/en';
import localeHe from '@angular/common/locales/he';
import localeHeExtra from '@angular/common/locales/extra/he';

registerLocaleData(localeEn, 'en');
registerLocaleData(localeHe, 'he', localeHeExtra);

localized-date.pipe.ts

import { DatePipe } from '@angular/common';
import { Pipe, PipeTransform } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';

@Pipe({
  name: 'localizedDate',
  pure: false
})
export class LocalizedDatePipe implements PipeTransform {
  constructor(private translateService: TranslateService) {}

  transform(value: any, pattern: string = 'mediumDate'): any {
    const datePipe: DatePipe = new DatePipe(this.translateService.currentLang);
    return datePipe.transform(value, pattern);
  }
}

Now you can use it in entire application. When you change language it will change locale in entire application. Also you can send format to pipe as well otherwise default format is mediumDate.

<div class="date">{{ createAt | localizedDate}}</div>

Jan 15 '20 14:01 Indrajeetsing

awesome, Thanks to @Indrajeetsing solution and it's the way. I just edited a bit and it might be more "Angular way"

@Pipe({
name: 'localizedDate',
pure: false
})
export class LocalizedDatePipe implements PipeTransform {
constructor(private translateService: TranslateService, private datePipe: DatePipe) {}

transform(value: any, pattern: string = 'mediumDate'): any {
return this.datePipe.transform(value, pattern, undefined, this.translateService.currentLang);
}
}

Just add DatePipe to your sharedModule providers (because we are using DatePipe in component ) and LocalizedDatePipe to sharedModule declarations.