How to internationalize dates in Angular

Depends on your use case:

• from typescript code using formatDate helper function
• from HTML templates using DatePipe

Let's explore this 2 use cases:

Internationalize dates from code:

Angular helps us by providing formatDate helper function from @angular/common package.

How to use formatDate ?

formatDate receives 4 parameters:

Example:

import { Component } from "@angular/core";
import { LOCALE_ID, Inject } from "@angular/core";
import { formatDate } from "@angular/common";

import { of } from "rxjs";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  currentDate = new Date();
  dateFormat = "dd MMM yyyy";
  currentDate$ = of(formatDate(this.currentDate, this.dateFormat, this.locale));
  constructor(@Inject(LOCALE_ID) public locale: string) {}
}

The above Angular code should show current date as 14 Mar 2020.

Internationalize dates from HTML:

DatePipe and formatDate parameters are pretty similar with each other:

In HTML we could use date pipe:

  {{ (currentDate) | date:dateFormat:'GMT':locale }}

The above Angular code should show current date as 14 Mar 2020.

Difference in parameters positioning:

formatDate timezone it's at the end and date pipe timezone it's the third one.
So, there is a switch between the last two parameters in terms of positioning.

When to use formatDate function or date pipe ?

• formatDate mostly for times when you need to compose big strings from code
• date pipe for times when you need to format a single date on HTML

Article first posted here

Follow me on twitter