How to initialize Angular Pipe (CurrencyPipe)

Question

Reading the official docs I'm confused about how to initialize pipes in Angular.

When I read the docs where it says

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

I interpret this as I should be able to get the following to work

// component.ts
import { CurrencyPipe } from '@angular/common'; 
// component.html
<div>{{ myNumber | CurrencyPipe [ : "USD" [ : "symbol" [ : "0.0-0" ] ] ] }}</div>

But obviously this doesn't work.

Two insights would fully answer my question: 1) an explanation for what the doc notation is trying to say, and 2) how I can implement my desired pipe

---

Here's an minimal reproducible example (mre). I'm working in a larger project so if more information is needed let me know.

// mre.component.ts
import { CurrencyPipe } from '@angular/common'; 
import { Component } from '@angular/core';

@Component({
  selector: 'mre',
  templateUrl: './mre.component.html',
  styleUrls: ['./mre.component.css'] // This is a blank file
});
export class MreComponent {
  constructor() {
      console.log(CurrencyPipe); // This line is only here so typescript won't be angry
  };
  public myNumber: number = 1234.56;
}
// mre.component.html
<div>
     <p>{{ myNumber | currency }}</p>
</div>

If I include BrowserModule in mre.module.ts then I get the following error at runtime. Error: BrowserModule has already been loaded.

---

I removed Browser Module (to have it how it was) and it works now. Apparently I changed something between those steps but I don't know what it was. Thanks for the help. Sorry for not being descriptive enough with the cases I'd tried beyond the example I initially gave.

Answer 1

You don't need to initialize the currency pipe, it is built into Angular. You just need to make sure that your module file is importing CommonModule. In your example your syntax is a little off. To ensure that you have correctly imported the pipe try just this,

<div>{{ myNumber | currency }}</div>

This will use the currency pipe with all of the default formatting. Then once you have that working you can start adding some of the formatting parameters,

<div>{{ myNumber | currency:'USD':'code':'.2-2' }}</div>

The different values you can supply for each of the formatting options can be found here