🔥 Angular Pro Tips: Creating a Custom Pipe for Human-Readable Numbers (K, M, B Format)

#webdev #angular #frontend #productivity

Displaying large numbers in dashboards or reports can clutter your UI and overwhelm users. Let’s solve this by creating a custom Angular pipe that converts numbers into a more readable format — like 1,500 to 1.5K and 2,500,000 to 2.5M.

In this post, you'll learn how to build a clean, reusable pipe that formats large numbers using suffixes like K, M, and B.

🧠 Why Use a Custom Pipe?

Angular comes with built-in pipes (like date, currency, and number) — but sometimes you need more control. A custom pipe:

Keeps templates clean
Promotes reusability
Keeps formatting logic separated from business logic

⚙️ Step 1: Generate the Pipe

In your Angular project, run the following command:

ng generate pipe numberSuffix

This creates a new file: number-suffix.pipe.ts.

🛠 Step 2: Add the Logic

Open number-suffix.pipe.ts and replace the contents with:

import { Pipe, PipeTransform } from '@angular/core';
@Pipe({ name: 'numberSuffix' })
export class NumberSuffixPipe implements PipeTransform {
  transform(value: number): string {
    if (value == null) return '';
    if (value < 1000) return value.toString();
    const suffixes = ['', 'K', 'M', 'B'];
    const tier = Math.floor(Math.log10(value) / 3);
    if (tier === 0) return value.toString();
    const suffix = suffixes[tier];
    const scale = Math.pow(10, tier * 3);
    const scaled = value / scale;
    return scaled.toFixed(2).replace(/\.00$/, '') + suffix;
  }
}

💡 What’s Happening Here:

We find the “tier” (thousands, millions, billions) based on the number’s size.
We scale the number down and attach the appropriate suffix.
.toFixed(2).replace(/.00$/, '') ensures clean output — e.g., 1.00K becomes 1K.

🧪 Step 3: Use the Pipe in Your Template

Example usage in a component template:

<p>{{ 950 | numberSuffix }}</p>         <!-- Output: 950 -->
<p>{{ 1500 | numberSuffix }}</p>        <!-- Output: 1.5K -->
<p>{{ 2000000 | numberSuffix }}</p>     <!-- Output: 2M -->
<p>{{ 7250000000 | numberSuffix }}</p>  <!-- Output: 7.25B -->