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