19

Angular's en-us localization has been updated since 1.3 to display negative currency with a negative sign instead of parentheses. I am using AngularJS 2 / Typescript and would like to override the default negative sign with parentheses (or even something else).

Discussion on this shows to override negPre & negSuf however I do not see how to do this with Angular2. Or maybe a more elegant way to achieve this.

UtahDoug
  • 193
  • 1
  • 1
  • 6
  • Consider extending the CurrecyPipe class: http://stackoverflow.com/questions/37032560/how-to-extend-angular2-datepipe – Yakov Fain Jan 10 '17 at 18:16
  • I want to keep other country/lang localization's intact and just update en-US. I'm looking at checking the localization in the CurrencyPipe and then if en-us alter the display, but just seems dirty. – UtahDoug Jan 10 '17 at 18:41
  • this is my custom pipe: https://stackoverflow.com/a/74575215/15104639 – Pepe Alvarez Nov 25 '22 at 16:04

1 Answers1

24

I appreciate you asking this great question. Of course the currency pipe does exist, but after scanning the currency pipe documentation it seems that out-of-the-box this pipe won't do what you want. However, you can accomplish your goal with a custom pipe.

1. First, recognize that you can "chain pipes".

For example, you can have a number type variable, send it through the currency pipe, and then send it through your own custom pipe:

<h1>{{someNumber | currency:'USD':true | myCustomPipe}}</h1>

2. Recognize that the currency pipe returns a string.

This means that your custom pipe can accept a string, do some string manipulation, and return a new string.

3. Recognize that the string manipulation algorithm to go from minus sign to parentheses isn't really that complicated.

The logic can be interpreted in plan english like this, "If the first character of my input value is not a minus sign then just return the value, but if it is a minus sign then return the entire string without that first character and append a string of a single paren on either side of it". Using the JavaScript ternary operator it might look like this:

value.charAt(0) === '-' ?
'(' + value.substring(1, value.length) + ')' :
value;

I have also created a nice Pipe that does this as a minimum workable example. Suppose you have this component that is displaying the someNumber variable whose value is -5 (negative five).

@Component({
  selector: 'my-app',
  template: `
    <h2>MinusSignToParens Pipe Demo</h2>
    <h1>{{someNumber | currency:'USD':true | minusSignToParens}}</h1>
  `
})
export class App implements OnInit {
   
  private someNumber = -5;
  
  constructor() {}
  
  ngOnInit() {}
}

And here is the code for the minusSignToParens pipe:

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'minusSignToParens'
})
export class MinusSignToParens implements PipeTransform {

    transform(value: any, args?: any): any {
        return value.charAt(0) === '-' ?
           '(' + value.substring(1, value.length) + ')' :
           value;
    }
}

Here is the example in a Plunkr if you wish to play around with it.

And remember, as Migos would say, pipe it up!

Jim
  • 3,821
  • 1
  • 28
  • 60