Angular Basics: Number Pipe 101 with Examples
source link: https://www.telerik.com/blogs/angular-basics-number-pipe-101-examples
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
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.
Angular Basics: Using Pipes in Angular
Learn more about using pipes in Angular.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK