Angular 15 Decimal Pipe examples | rounded number examples
- Admin
- Sep 20, 2023
- Typescript Angular Angular-pipes
It is a short tutorial about angular pipe decimal examples.
- Limit the number to 2 decimals
- How to display the number with decimals in Angular. You can check other posts on How to always run some code when a promise is resolved or rejected
Angular decimal pipe
A pipe is a function that takes input and transforms the data and output into a different format. Angular DecimalPipe formats the number to string with a decimal point and localized string rules.
Angular has an inbuilt pipe called DecimalPipe
from @angular/common🔗 module.
This is used to convert and format numbers into decimal strings using localization. It accepts parameters. Here is the syntax in the HTML template
{{ expression | number [ : digitsInfo [ : locale ] ] }}
The parameters
expression: is a number value or expression to format
number: It is an object which contains number object format rules
Locale: default local is en_US can be customized with local string to format as per localized form rules.
digitsInfo
: Represent decimal format
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}
-
minIntegerDigits
: minimum number of digits before fraction(.) -
minFractionDigits
: Minimum decimal digits after fraction. -
maxFractionDigits
: Maximum decimal digits after fraction.
Angular Decimal pipe example
Let’s create a new component in Angular for testing decimal pipe in Angular
A:\work\angular-pipe-examples>ng g component decimal-pipe-example
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.html (35 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.spec.ts (712 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.ts (330 bytes)
CREATE src/app/decimal-pipe-example/decimal-pipe-example.component.scss (0 bytes)
UPDATE src/app/app.module.ts (1085 bytes)
This creates an angular component in the src/decimal-pipe-example
folder.
In this example, used various format options of decimal pipe in Angular code Here is a component that contains a number.
import { Component, OnInit } from "@angular/core";
@Component({
selector: "app-decimal-pipe-example",
templateUrl: "./decimal-pipe-example.component.html",
styleUrls: ["./decimal-pipe-example.component.scss"],
})
export class DecimalPipeExampleComponent implements OnInit {
constructor() {}
value: number = 35.8796;
ngOnInit(): void {}
}
See various options declared
<p>Angular Decimal Pipe Example</p>
{{value | number}}
Output:
Angular Decimal Pipe Example
35.88
how to format and round a number in Angular?
Suppose you have a numbers
-
20 to 20.00
-
10.111 to $ 10.11
-
decimal pipe with the format
number format to 4 decimals and used number:‘2.1-4’ format.
which allows
- 2 minimum number of digits
- 1 is the minimum fraction of digits
- 4 is the maximum fraction of digits
a number type variable is declared in the typescript
value: number = 35.879612312;
value1: number = 5.1231345;
value2: number = 5.8;
used decimal pipe to variable in HTML template
Let’s format the number into with maximum of 4 decimal places in the Angular HTML component.
<p>Angular Decimal Pipe Example</p>
<div>{{value | number:'2.1-4'}}</div>
<div>{{value1 | number:'2.1-4'}}</div>
<div>{{value2 | number:'2.1-4'}}</div>
Output:
Angular Decimal Pipe Example
135.8796
05.1231
05.8
Above all, decimalpipe is used in the HTML template component. How do we use decimalpipe in the Typescript component?
Decimal pipe to round number in typescript component?
First, Please add DecimalPipe
to your providers
of app.module.ts.
@NgModule({
providers: [DecimalPipe],
})
In the typescript component,
- please import decimalpipe into an angular component
- configure this pipe in the constructor with a variable, and it is available to use across components.
- written roundNumber() which uses decimalpipe variable to transform into allowing 2 decimal fractions with format rules(
1.2-2
)
import { Component, OnInit } from "@angular/core";
import { DecimalPipe } from "@angular/common";
@Component({
selector: "app-decimal-pipe-example",
templateUrl: "./decimal-pipe-example.component.html",
styleUrls: ["./decimal-pipe-example.component.scss"],
})
export class DecimalPipeExampleComponent implements OnInit {
constructor(private decimalPipe: DecimalPipe) {}
value: number = 135.879612312;
value1: number = 5.1231345;
value2: number = 5.8;
ngOnInit(): void {}
roundNumber(num: number): string | null {
return this.decimalPipe.transform(num, "1.2-2") ?? "0";
}
}
In HTML component, Call the method using template syntax([object Object])
<div>
{{roundNumber(123)}}
</div>
decimal pipe is not working in Angular
When you are using a decimal pipe, You used to get the following errors
- Unhandled Promise rejection: Template parse errors The pipe ‘number’ could not be found
- decimal pipe does not work in Angular
- pipe not found in Angular
The reason is decimal pipe is a pipe from the CommonModule
of the @angular/common
module.
You have to import CommonModule
in the application module i.e app.module.ts
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { CommonModule } from "@angular/common";
@NgModule({
imports: [BrowserModule, FormsModule, CommonModule, BrowserAnimationsModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
Let’s see another error due to calling decimal pipe in the Angular typescript component
EXCEPTION: Uncaught (in promise): Error: No provider for DecimalPipe!
To make decimalpipe
works in the Angular typescript component, Add DecimalPipe to the provider section in app.module.ts
@NgModule({
providers: [DecimalPipe],
})
Here is an app.module.ts configuration
import { CommonModule, DecimalPipe } from "@angular/common";
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppRoutingModule } from "./app-routing.module";
@NgModule({
declarations: [AppComponent],
imports: [CommonModule, BrowserModule, AppRoutingModule],
providers: [AppComponent, DecimalPipe],
bootstrap: [AppComponent],
})
export class AppModule {}
Conclusion
To Sum up, Learned what is a decimal pipe with syntax in Angular and displays a formatted decimal number with localized string format.
It also includes how to use decimal pipe in Angular typescript and HTML template components.