How To Create Currency Format Pipe in Angular

When working with financial data in Angular applications, properly formatting currency values is crucial for ensuring clarity and usability. Angular provides a built-in CurrencyPipe, but sometimes, custom requirements necessitate a tailored solution. In this article, we'll explore a custom CurrencyFormatPipe implementation that allows flexible formatting of currency values.

Understanding the Code

Let’s break down the custom CurrencyFormatPipe implementation:

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);
    }
}

Breaking Down the Implementation

1. Pipe Metadata

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