Display negative currency with parentheses in Angular 2 / Typescript

Question

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.

Answer 1

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!