How to combine DatePipe and CurrencyPipe to display formatted transaction details

Question

Can i know How to combine DatePipe and CurrencyPipe to display formatted transaction details?

Answer 1

In Angular templates, combine DatePipe and CurrencyPipe to format transaction details by chaining them with the | operator. For example:

{{ transaction.date | date:'shortDate' }} - {{ transaction.amount | currency:'USD':'symbol':'1.2-2' }}

date:'shortDate': Formats the date (e.g., 4/13/25).

currency:'USD':'symbol':'1.2-2': Formats the amount with USD symbol, 2 decimal places (e.g., $123.45).

Example with a transaction object:

transaction = { date: new Date('2025-04-13'), amount: 123.456 };

Ensure DatePipe and CurrencyPipe are provided by CommonModule, imported in your module:

import { CommonModule } from '@angular/common';

@NgModule({

  imports: [CommonModule],

  // ...

})