Angular 15 Decimal Pipe examples | rounded number examples

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.