Angular2+ currency pipe doesn't work if a number is 1000+

Question

I have a component where i calc a total price and display the total price by using a subject + the currency pipe. Where my value goes 1000+ i got an error:

 InvalidPipeArgument: '1,004.33 is not a number' for pipe 'CurrencyPipe'

my component ts file:

    export class AppComponent  {
      private PRICE: number = 14.99;
      private AMOUNT: number = 1;
      private totalAmount: number = 0;
      public totalPrice$: BehaviorSubject<number> = new BehaviorSubject<number>(0);
    
      public onCalcPrice(): void {
        let price = parseFloat((this.AMOUNT * this.PRICE).toFixed(2));
        this.totalAmount+=price
        this.totalPrice$.next(this.totalAmount);
      }
    }

my component html file:

    <p>
      {{totalPrice$ | async | number | currency: "USD"}}
    </p>
    <div>
      <button type="button" (click)="onCalcPrice()">increase price amount</button>
    </div>

stackblitz

Answer 1

The output of the number pipe might not always be a number again. Depending on local it might end up in a format, that itself is not parseable as number again.

So if you just leave out the number pipe and directly parse the totalPrice$ value with the currency pipe, it should work.

{{totalPrice$ | async | currency: "USD"}}