Angular Basics: Number Pipe 101 with Examples

Angular pipes let us render items in component templates the way we want. We’ll learn three pre-built pipes for formatting numbers and how to create our own.

Angular Pipes let us render items in component templates in the way we want.

Angular comes with a few built-in pipes to let us format data for display, including some that let us format numbers. We can also create our own number-formatting pipes.

In this article, we will look at how to use these pipes in our Angular projects.

Built-in Number Pipes

Angular comes with the following pipes that let us format numbers. They are:

• CurrencyPipe
• DecimalPipe
• PercentPipe

CurrencyPipe

We can use the CurrencyPipe to format numbers into currency values. To use it, we use currency in the template.

For instance, we write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 888.88;
}

app.component.html

<p>{{x | currency}}</p>

to format number x into a currency value using the set locale’s currency. As a result, $888.88 is displayed.

We can pass in more options into the currency pipe. For instance, we can write:

app.component.html

<p>{{x | currency:'EUR'}}</p>

Then x is displayed as a Euro currency value. Therefore, €888.88 is displayed.

We can also specify the format of the currency symbol. For example, we write:

<p>{{x | currency:'EUR':'code'}}</p>

to format x with the three-letter currency symbol instead of the currency sign itself. Therefore, x is displayed as EUR888.88.

We can specify the format with a string. To do this, we write:

<p>{{x | currency:'EUR':'symbol':'4.2-3':'en'}}</p>

The third string (4.2-3) specifies the format of the currency value displayed.

In the string, the first number (4) is the minimum number of integer digits. The second number (2) is the minimum number of fraction digits. And the last number (3) is the maximum number of fraction digits.

The fourth string (en) is the locale string that specifies the locale of the formatted currency value.

DecimalPipe

Another built-in pipe that we can use to format numbers is the DecimalPipe. To use it, we use number on our component template.

And we can write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 888.88;
}

app.component.html

<p>{{x | number: '2.0-1'}}</p>

The string that comes after number specifies the format of the number.

The first number (2) is the minimum number of integer digits. The second number (0) is the minimum number of fraction digits. And the last number (1) is the maximum number of fraction digits.

Therefore, 888.9 is displayed since the maximum number of fractional digits is 2. Therefore 888.88 is rounded to 888.9.

PercentPipe

We can format percentage values with the PercentPipe. To use it, we use percent in our template.

We write:

app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  x = 888.88888;
}

app.component.html

<p>{{x | percent: '2.0-1':'en'}}</p>

The string after percent specifies the format of the number.

The first number (2) is the minimum number of integer digits. The second number (0) is the minimum number of fraction digits. And the last number (1) is the maximum number of fraction digits.

The value (en) after the format string is the locale string.

Therefore, we see 88,888.9% displayed since we specified that the formatted value should have a maximum 1 decimal digit.

Custom Number Pipe

We can create our own number formatting pipe easily with Angular CLI.

To create a new pipe and register it in an Angular module, we run ng g pipe followed by the name of the pipe.

For instance, we run:

ng g pipe CustomNumber

to create the CustomNumber pipe.

Then we should see the following files created:

src/app/custom-number.pipe.spec.ts
src/app/custom-number.pipe.ts

Also, src/app/app.module.ts is updated so that the pipe is registered.

In src/app/app.module.ts, we get something like:

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { CustomNumberPipe } from './custom-number.pipe';

@NgModule({
  declarations: [
    AppComponent,
    CustomNumberPipe
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

We see that CustomNumberPipe is in the declarations array property.

This means the CustomNumberPipe is registered in AppModule and we can use it in any component in the module.

Now we can add some logic to format numbers our way. We can format numbers easily with the Intl.NumberFormat constructor built into most modern browsers.

In src/app/custom-number.pipe.ts, we write:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'customNumber',
})
export class CustomNumberPipe implements PipeTransform {
  transform(
    value: number|string,
    style: string,
    currency: string,
    locale: string
  ): string {
    const numberFormat = new Intl.NumberFormat(locale, { style, currency });
    return numberFormat.format(Number(value));
  }
}

Every pipe class has to have the transform method. It takes value as the first argument. And it can take any number of arguments after that to let us adjust how value is formatted. It also should return a string.

In it, we create a Intl.NumberFormat instance with the locale, style and currency parameters.

Then we call format with the object returned by the constructor to return a new string value we get by formatting the value value.

The name property value is what we use to reference the pipe in our template.

Next, we use it by writing:

app.component.html

{{ x | customNumber : "currency" : "JPY" : "ja-JP" }}

We pass in the arguments in the same order they are listed in the signature of the transform method. Each argument is separated by a colon.

Therefore, we see that the formatted currency value that is displayed is ￥889.

Conclusion

Pipes let us render items in component templates in the way we want. Angular comes with a few built-in pipes to let us format data for display.

We learned three pre-built pipes that let us format numbers and how to create our own number-formatting pipes.

We can use built-in pipes if we just want to format numbers quickly and easily. Or we can create our own pipe with Angular CLI and our own code if we need to format numbers in ways that are not available with built-in pipes.