CODEWITHSUNDEEP
angularngx-translate
LisaParker
LisaParker

Reputation: 21

i18n in datePipe Angular

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 ?

Upvotes: 1

Views: 4496

Answers (2)

user6749601
user6749601

Reputation:

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;
    }
}

Upvotes: 4

Nagender Pratap Chauhan
Nagender Pratap Chauhan

Reputation: 2204

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');

Upvotes: 0

Related Questions