💰 Custom Currency Formatting in Angular – Your Way

When working with financial data in Angular apps, how you present numbers matters. Clear, consistent formatting not only improves readability but also builds trust with users. While Angular’s built-in CurrencyPipe is great for standard cases, sometimes you need a little more control.

That’s where a custom CurrencyFormatPipe comes in handy—letting you apply specific formatting rules, dynamic symbols, and utility-based logic that fits your needs.

---

🛠 The Pipe: How It Works

Here’s a lightweight and reusable implementation of a custom currency formatting pipe:

import { Pipe, PipeTransform } from '@angular/core';
import { Utilities } from './utilities';

@Pipe({
  name: 'currencyFormat',
  standalone: true,
})
export class CurrencyFormatPipe implements PipeTransform {
  transform(value: number | string, format: string = 'LN333,.2F', symbol: string = '$'): string | number {
    const _val = typeof value === 'string' ? +value : value;

    if (_val === null || _val === undefined || isNaN(_val)) {
      return null;
    }

    return Utilities.formatCurrency(_val, format, symbol);
  }
}

---

🔍 What’s Happening Under the Hood?

1. Standalone Pipe

@Pipe({
  name: 'currencyFormat',
  standalone: true
})

Using standalone: true means you can use this pipe directly without adding it to a module’s declarations. Clean and modular.

2. The transform Method

This is where the magic happens:

• Accepts a number or string (like '2500' or 2500)
• Applies a custom format (e.g., 'LN333,.2F')
• Falls back to the dollar symbol if none is provided
• Validates the input and avoids processing invalid values
• Delegates the formatting to a utility method for consistency

---

🧾 Example: Using It in Templates

Here’s how you use the pipe in your HTML:

<p>Price: {{ 123456789 | currencyFormat: 'LN333,.2F' : '$' }}</p>

Output:

Price: $1,234,567.89

---

🧩 Use It Inside a Component

Want to format inside a component’s template without declaring it in a module? Done:

import { CurrencyFormatPipe } from './currency-format.pipe';

@Component({
  selector: 'app-product',
  template: `<p>Price: {{ price | currencyFormat:'LN333,.2F':'€' }}</p>`,
  standalone: true,
  imports: [CurrencyFormatPipe]
})
export class ProductComponent {
  price = 2500;
}

Output:

Price: €2,500.00

---

🙋 Why Use a Custom Currency Pipe?

You might ask—why not just stick with Angular’s built-in CurrencyPipe?

Here’s why this custom approach makes sense:

• ✅ Flexible formatting: Choose how you want your numbers displayed using a format string like 'LN333,.2F'
• ✅ Symbol freedom: Use any symbol—€, ₹, ₿, you name it
• ✅ Centralized logic: Delegating to Utilities.formatCurrency() lets you manage formatting rules in one place
• ✅ No module clutter: Thanks to standalone, just import and go

---

🔧 Future Enhancements

Want to take it a step further? Here are a few upgrades worth considering:

• Locale-Aware Formatting: Extend support for different languages and regions
• Fallback Handling: Instead of returning null, show something like 'Invalid amount'
• Symbol Positioning: Add options for prefix vs suffix currency symbols

---

📌 Final Thoughts

Angular pipes are a powerful way to handle transformations right in your templates. With a custom CurrencyFormatPipe, you can format values exactly how your app needs—clean, consistent, and scalable.

Start small, tweak as you grow, and make it yours.

Have your own take on formatting currencies in Angular? I’d love to hear how you’ve handled it—drop your thoughts below!