Last Updated : 23 Jul, 2025
In this article, we are going to see what is DemicalPipe in Angular 10 and how to use it. The DemicalPipe is used to format a value according to digit options and locale rules.
Syntax:
{{ value | number}}
NgModule: Module used by DecimalPipe is:
Approach:
Parameters:
Example 1:
app.component.ts
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
pi: number = 2.33;
}
app.component.html
<p>
Number:
{{pi | number}}
</p>
<p>
<!-- In this '4.1-5' means 4 digits before .
and 1-5 digits after . depending
upon given digit -->
Number with 4 digits:
{{pi | number:'4.1-5'}}
</p>
Output:
Example 2:
app.component.ts
import { Component, LOCALE_ID } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
num: number = 20*4;
}
app.component.html
<p>
Number:
{{num | number}}
</p>
<p>
<!-- In this '4.2' means 3 digits before .
and 2 digits after . which is 80-->
Number with 3 digits:
{{num | number:'3.2'}}
</p>
Output:
Reference: https://v17.angular.io/api/common/DecimalPipe
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4