Angular 17 Decimal Pipe examples | rounded number examples

Angular 17 Decimal Pipe examples | rounded number examples

It is a short tutorial about angular pipe decimal examples.

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.

What is a decimal pipe in Angular?

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| number: It is an input of an expression or a number value to format a number
  • digitsInfo: Optional decimal format to specify It contains the following format.
{minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}

  • minIntegerDigits: minimum number of digits before fraction(.)

  • minFractionDigits: Minimum decimal digits after fraction.

  • maxFractionDigits: Maximum decimal digits after fraction.

  • Locale: Optional and default local is en_US, which can be customized with local string to format as per localized form rules.

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, 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 {}
}

value is transformed using a number pipe with default options.

<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 the following numbers and the result

  • 20 to 20.00
  • 10.111 to $ 10.11

decimal pipe with the format:

Here,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, 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({{}})

<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 work 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.