Angular 10 DemicalPipe API
Last Updated :
04 Aug, 2021
Improve
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:
- CommonModule
Approach:
- Create an Angular app to be used.
- There is no need for any import for the DecimalPipe to be used.
- In app.component.ts define the variable that takes decimal value.
- In app.component.html use the above syntax to make the date element.
- Serve the angular app using ng serve to see the output.
Parameters:
- Value: It takes a string value that is converted to a decimal according to the conditions using the decimal pipe.
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://angular.io/api/common/DecimalPipe
