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 optional
registerLocaleData(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

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

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

The Internet seems to agree with Jahnavi Paliwal's answer on this point, however I believe we are now supposed to be setting it via angular.json file and FETCHING it (if we need to) via the LOCALE_ID provider. If you do the following then the Date Pipe and Angular Material DatePicker (etc.) will use the correct Locale out of the box without having to manually change LOCALE_ID in your Module definition.

"projects": {
  "myProject": {
    "projectType": "application",
    ...
    },
    "i18n": {
      "sourceLocale": "en-GB" // <-- specify your preferred default
    },
    "architect": {
      "build": {
        ...
        "options": {
          "localize": true, // <-- tell Angular to check
          ...
          "aot": true,
          "outputPath": "dist",