Decimal Pipe in Angular: Format Numbers Easily

The decimal pipe in Angular formats numbers as decimal strings with a specified number of digits. It helps display numbers with fixed decimal places in templates easily using simple syntax.

How It Works

The decimal pipe in Angular acts like a smart formatter for numbers. Imagine you have a price or a measurement that you want to show on a webpage. Instead of showing a long number with many decimals, the decimal pipe lets you control how many decimal places to show.

It works by taking your number and converting it into a string with the exact decimal digits you want. You can think of it like rounding your number but also making sure it always shows the right number of decimals, even if they are zeros. This makes your data look neat and consistent.

For example, if you want to show 3 decimal places, the decimal pipe will add zeros if needed or cut off extra decimals. This is very useful for prices, measurements, or any numeric data you want to display clearly.

Example

This example shows how to use the decimal pipe in an Angular template to format a number with 2 decimal places.

typescript

<!-- app.component.html -->
<p>Original number: {{ price }}</p>
<p>Formatted with decimal pipe: {{ price | number:'1.2-2' }}</p>

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  price = 1234.5;
}

Output

Original number: 1234.5
Formatted with decimal pipe: 1,234.50

When to Use

Use the decimal pipe whenever you want to display numbers with a consistent number of decimal places in your Angular app. It is perfect for prices, currency values, measurements, or any numeric data where decimals matter.

For example, in an online store, you want all prices to show two decimals like 19.99 or 5.00. The decimal pipe makes this easy without extra code. It also helps keep your UI clean and professional by avoiding long or inconsistent decimal numbers.

Key Points

• The decimal pipe formats numbers with a fixed range of decimal places.
• It is used in Angular templates with the number pipe syntax.
• You can specify minimum and maximum decimal digits like '1.2-2'.
• It automatically adds commas for thousands based on locale.
• It helps display numeric data clearly and consistently.

Key Takeaways

The decimal pipe formats numbers with controlled decimal places in Angular templates.

Use the decimal pipe to display prices, measurements, or any decimals clearly.

Specify decimal digits using the format string like '1.2-2' for min and max decimals.

It automatically adds thousands separators based on locale settings.

The decimal pipe keeps numeric data neat and consistent in your UI.