How to format dates and numbers with Angular?

In this article, we are going to take a look at a few options on how to format data with Angular without any third-party library.

Option #1: Pipes

Pipes can be used to format data such as dates, currencies, percents, and more. They are meant to be used in HTML templates.

Here is a simple example where I format a date. In my component class, I have:

export class AppComponent  {
now = new Date();
}

And then in my template, I would use:

{{now | date}}

The above code will apply the date pipe to the input date, in our case now. In that specific example, Angular would use its default date format to return the formatted date. That’s something you can fully customize by using one of the many formatting options available.

Here I would just display the 4-digit year, for instance:

{{now | date:'yyyy'}}

Here is the difference between a raw date being rendered and a pipe-formatted one:

The Angular framework has many different pipes you can use. The full list can be found here.

Option #2: Functions

Get Alain Chautard’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

You can also use functions to format data in your Typescript code rather than using pipe in your templates if needed.

Using those functions is just a matter of importing them from @angular/common and calling them with the proper parameters. For instance:

import { formatDate} from '@angular/common';
@Component({
    // ...
})
export class AppComponent  {
now = new Date();
   nowFormatted: string;
constructor() {
      this.nowFormatted = formatDate(this.now, 'yyyy', 'en-US');
   }
}

The signature of those functions is very similar to the parameters used with pipes:

The similarity between pipes and those functions makes a lot of sense if we take a look under the hood: Angular Pipes are indeed using those functions to format data: https://github.com/angular/angular/blob/8.2.14/packages/common/src/pipes/number_pipe.ts#L13-L81

Another interesting point is that most of those functions need a locale as a parameter in order to know how to format the data based on your location.

You could pass that locale as I did earlier (“en-US” for the English language in the United States) or you could inject the one used by your application, which is a best practice:

import { Component, Inject, LOCALE_ID } from '@angular/core';
import { formatDate} from '@angular/common';
@Component({
    // ...
})
export class AppComponent  {
   // ...
constructor(@Inject(LOCALE_ID) locale: string) {
      this.nowFormatted = formatDate(this.now, 'yyyy', locale);
   }
}

You can find a side by side comparison of using pipes and formatting functions along with some more examples in the following Stackblitz:

My name is Alain Chautard. I am a Google Developer Expert in Angular, as well as a founding consultant and trainer at Angular Training where I help development teams learn and become proficient with Angular.

Need help with Angular? Let’s schedule some time to talk. I provide coaching and on-site training.

If you enjoyed this post, please clap for it or share it. Your help is always appreciated.