Formatting Numbers and Dates in Angular Using Pipes

As an Angular developer, you’re probably familiar with the concept of pipes. Pipes are a powerful tool built into Angular that allow you to transform data in your application. One of the most common uses of pipes is to format numbers and dates. In this article, we’ll go over how to use pipes to format numbers and dates in your Angular application.

Pipes in Angular

Before we dive into formatting numbers and dates specifically, let’s take a quick look at pipes in general. A pipe is a way to transform data in your Angular component template before it is rendered. Pipes take data as input and return modified data as output. Pipes are modeled after the Unix pipes concept, where the output of one process becomes the input of another process.

In Angular, pipes are declared using the @Pipe decorator. A pipe class must implement the PipeTransform interface, which requires it to have a transform method. The transform method takes an input value and any additional arguments, and returns the transformed output value.

Here’s an example of a custom pipe that simply doubles a number:

@Pipe({
  name: 'double'
})
export class DoublePipe implements PipeTransform {
  transform(value: number): number {
    return value * 2;
  }
}

Once you’ve declared a pipe, you can use it in your component template like this:

<p>The double of 5 is {{ 5 | double }}</p>

This will output “The double of 5 is 10”.

Formatting Numbers with Pipes

One common use case for pipes is to format numbers in your application. There are several built-in pipes in Angular that can be used for formatting numbers, including number, currency, and percent. Let’s take a closer look at each of these pipes.

The `number` Pipe

The number pipe is used for formatting numbers with a fixed number of digits after the decimal point. The number of digits after the decimal point can be specified as an argument to the pipe. Here’s an example:

<p>The number is {{ 3.14159 | number:'1.2-3' }}</p>

This will output “The number is 003.142”.

In this example, '1.2-3' specifies that the number should have one digit before the decimal point, two digits after the decimal point, and a minimum of three digits including the decimal point. The 0 in front of the decimal point is a padding character, and the -3 at the end specifies the minimum number of digits.

The `currency` Pipe

The currency pipe is used for formatting currency values. By default, it uses the currency symbol for the current locale (e.g. $ for US dollars), but you can specify a different currency symbol as an argument to the pipe. Here’s an example:

<p>The price is {{ 9.99 | currency:'EUR':'symbol':'1.2-2' }}</p>

This will output “The price is €9.99”.

In this example, 'EUR' specifies that the currency should be displayed as euros, 'symbol' specifies that the currency symbol should be used, and '1.2-2' specifies that the number should have one digit before the decimal point, two digits after the decimal point, and a maximum of two digits including the decimal point.

The `percent` Pipe

The percent pipe is used for formatting percentages. By default, it formats the number as a percentage with two digits after the decimal point, but you can specify the number of digits using an argument. Here’s an example:

<p>The percentage is {{ 0.1234 | percent:'1.3-4' }}</p>

This will output “The percentage is 12.340%”.

In this example, '1.3-4' specifies that the percentage should have one digit before the decimal point, three digits after the decimal point, and a minimum of four digits including the decimal point.

Formatting Dates with Pipes

Another common use case for pipes is to format dates in your application. There are several built-in pipes in Angular that can be used for formatting dates, including date, shortDate, and longDate. Let’s take a closer look at each of these pipes.

The `date` Pipe

The date pipe is used for formatting dates in a variety of formats. The format can be specified using a format string. Here’s an example:

<p>The date is {{ today | date:'fullDate' }}</p>

This will output “The date is Wednesday, January 12, 2022”.

In this example, 'fullDate' specifies that the date should be formatted with the full name of the day of the week, the full name of the month, the day of the month, the year, and the time zone offset from UTC.

The `shortDate` Pipe

The shortDate pipe is used for formatting dates in a short format that is appropriate for displaying alongside other data. Here’s an example:

<p>The date is {{ today | shortDate }}</p>

This will output “The date is 1/12/2022”.

The `longDate` Pipe

The longDate pipe is used for formatting dates in a more verbose format that includes the full name of the day of the week and the full name of the month. Here’s an example:

<p>The date is {{ today | longDate }}</p>

This will output “The date is Wednesday, January 12, 2022”.

Conclusion

In this article, we’ve gone over how to use pipes to format numbers and dates in your Angular application. The number, currency, and percent pipes are great for formatting numbers with different requirements, and the date, shortDate, and longDate pipes are great for formatting dates in various formats. By leveraging these built-in pipes, you can save lots of time and effort when it comes to formatting data in your Angular application.