How to format currency with Angular currency pipe
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Displaying currency values with proper formatting is critical for e-commerce and financial applications built with Angular. As the creator of CoreUI with over 11 years of Angular development experience since 2014, I’ve implemented currency formatting in numerous enterprise applications. The most reliable solution is to use Angular’s built-in currency pipe, which handles locale-specific formatting automatically. This pipe ensures currency symbols, decimal separators, and digit grouping are displayed correctly.
Use the currency pipe in Angular templates to format monetary values.
// component.ts
export class AppComponent {
price = 1234.56
}
<!-- template.html -->
<p>{{ price | currency }}</p>
<p>{{ price | currency:'EUR' }}</p>
<p>{{ price | currency:'USD':'symbol':'1.0-0' }}</p>
<p>{{ price | currency:'GBP':'code' }}</p>
The currency pipe transforms a number into a formatted currency string. The first parameter specifies the currency code (defaults to USD). The second parameter controls the symbol display: 'symbol' shows the currency symbol, 'code' shows the currency code, or you can use a custom string. The third parameter is the digit format following the pattern minIntegerDigits.minFractionDigits-maxFractionDigits. The pipe automatically uses the application’s locale for proper formatting.
Best Practice Note
This is the same reliable currency formatting we use in CoreUI Angular components for dashboards and financial interfaces. Always specify the currency code explicitly rather than relying on defaults, and consider using the 'code' display option in international applications to avoid confusion between different currency symbols.
