datePipe Angular 中的 i18n

Question

I have an application that it's running in two language ( i can change an choose the language i want bu 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>

At the moment i get it like this Monday 17 August 2018, i want to get the french one too Lundi 17 Aout 2018

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

Answer 1

Create and use a custom pipe as described here: https://angular.io/guide/pipes

Something like this:

import { Pipe, PipeTransform } from '@angular/core';

enum Days {
    Dimanche,
    Lundi,
    Mardi,
    Mercredi,
    Jeudi,
    Vendredi,
    Samedi
}

enum Months {
    Janvier,
    Février,
    Mars,
    Avril,
    Mai,
    Juin,
    Juillet,
    Août,
    Septembre,
    Octobre,
    Novembre,
    Décembre
}

@Pipe({ name: 'frenchDate' })
export class FrenchDatePipe implements PipeTransform {
    transform(date: Date) {

        const dayOfMonth = date.getDate();
        const nameOfDay = Days[date.getDay()];
        const nameOfMonth = Months[date.getMonth()];
        const year = date.getYear();

        const result = nameOfDay + ' ' + dayOfMonth + ' ' + nameOfMonth + ' ' + year;

       return result;
    }
}

Answer 2

I have no more knowledge about i18n but after study docs i ensure that this code will work well for you .

ng serve --configuration=fr

use this command for run your program .here fr refers to the French language identifier.

If you want to import locale data for other languages, you can do it manually in app.module.ts file.

import { registerLocaleData } from '@angular/common';

import localeFr from '@angular/common/locales/fr';

registerLocaleData(localeFr, 'fr');