Angular: How to display a date in French format

Try adding to your app module the following code

import { registerLocaleData } from '@angular/common';import localeFr from '@angular/common/locales/fr';// the second parameter 'fr' is optionalregisterLocaleData(localeFr, 'fr');

https://angular.io/guide/i18n#i18n-pipes

EDIT:Then if you want to sets this locale as default you need to set the LOCALE_ID injection token as 'fr' like that :

{provide: LOCALE_ID, useValue: 'fr' }

In your app module

Hope it helps

The answer depends on the version of angular that you are using. You have to provide for the LOCALE which you will be using.The default LOCALE is configured as en-US and for all others, you have to manually add the same as providers. Only the way of providing for the LOCALES differs in the angular versions. Check the below:

1. Angular 5 and above:

   Add the following lines in your app.module.ts:

   import { registerLocaleData } from '@angular/common';import localeFr from '@angular/common/locales/fr';registerLocaleData(localeFr, 'fr');

2. Below Angular 5:

   Add the following lines in your app.module.ts:

   import { LOCALE_ID } from '@angular/core';@NgModule({    imports : [],    providers: [ { provide: LOCALE_ID, useValue: "fr-FR" }]    //Your code})

Simply try this(french format: [Day name] [Day number] [Month name] [Year number])

{{myDate | date:'EEEE, d,MMMM, y'}}

if you dont want day name remove 'EEEE' from pipe

OR

1. update your module.ts

   import { NgModule, LOCALE_ID } from '@angular/core';

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

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

   registerLocaleData(localeFr);

   .....

   @NgModule({

   .....providers: [ {provide: LOCALE_ID, useValue: "fr-CA" } ]

   })

will do the work