Angular 10 formatDate() Method

Last Updated : 23 Jul, 2025

In this article, we are going to see what is formatDate in Angular 10 and how to use it. formatDate is used to format a date according to locale rules.

Syntax:

formatDate(value, locale, format, timezone)

Parameters:

  • value: The number to format.
  • locale: A locale code for the locale format.
  • format: The date-time components to include.
  • timezone: The time zone of the place.

Return Value:

  • string: the formatted date string.

NgModule: Module used by formatDate is:

  • CommonModule

Approach: 

  • Create the Angular app to be used.
  • In app.module.ts import LOCALE_ID because we need locale to be imported for using get formatDate.
import { LOCALE_ID, NgModule } from '@angular/core';
  • In app.component.ts import formatDate and LOCALE_ID
  • inject LOCALE_ID as a public variable.
  • In app.component.html show the local variable using string interpolation
  • Serve the angular app using ng serve to see the output.

Example 1:

app.component.ts 
import {
  formatDate
 }
  from '@angular/common';

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatDate("02-february-0202", 'dd-MM-yyyy' ,this.locale);
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}
app.component.html 
<h1>
  GeeksforGeeks
</h1>

<p>Locale Date is : {{curr}}</p>

Output:

Example 2:

app.component.ts 
import {
  formatDate
 }
  from '@angular/common';

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

@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
curr = formatDate("03-march-0303", 'yyyy-dd-MM' ,this.locale);
constructor(
  @Inject(LOCALE_ID) public locale: string,){}
}
app.component.html 
<h1>
  GeeksforGeeks
</h1>

<p>Locale Date is : {{curr}}</p>

Output:

Reference: https://v17.angular.io/api/common/formatDate

Comment

Explore