WoJ
  • Blog
  • About Jim

A place to obtain the wisdom of Jim.

Angular 2 Minus Sign To Parentheses Pipe

1/11/2017

Comments

 
I recently wrote up an answer to this Stack Overflow question, and I was so proud of it that I decided to write up a blog post about it. 

The Problem

the basic gist of the question was that the original poster was using the built-in currency pipe but wanted to show a negative number with parentheses instead of with a minus sign. 

The Solution 

My solution involves chaining another custom pipe after the currency pipe. Since the currency pipe outputs a string my custom pipe can just do some string manipulation and return a new one with parentheses instead of minus signs.
<h1>{{someNumber | currency:'USD':true | myCustomPipe}}</h1>

The Code

Here's the code for the custom pipe:
@Pipe({
  name: 'minusSignToParens'
})
export class MinusSignToParens implements PipeTransform {

  transform(value: any, args?: any): any {
    return value.charAt(0) === '-' ?
           '(' + value.substring(1, value.length) + ')' :
           value;
}
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".
Here's an example of how you might use this in a component:
@Component({
  selector: 'my-app',
  template: `
    <h2>MinusSignToParens Pipe Demo</h2>
    <h1>{{someNumber | currency:'USD':true | minusSignToParens}}</h1>
  `
})
export class App implements OnInit {

  private someNumber:any = -5;

  constructor() {}

  ngOnInit() {}
}

The Plunk

I created a plunkr demo for this pipe that acts as a minimum workable example. I like starting from this Angular 2.4.1 plunkr starter. This starter plunk lays out all of the Angular 2 boilerplate for setting up a new project. You can create and import files right there in Plunkr so it feels (sort of) close to "real" development like you would do locally with an IDE. I am not a fan of using Plunkr for too many things, but one thing I think it is really excellent for is creating small demo projects that serve as answers to stack overflow questions (or that go along with questions as well). 

The Glory

It can be nice racking up stack overflow reputation points, showing off your Angular 2 knowledge, and flexing problem solving muscles, but I also like to think that I'm helping others and making a positive impact on the world. It felt great seeing the original posters thank you comment on my answer:
Picture
Comments
comments powered by Disqus

    ​Author

    Picture
    The posts on this site are written and maintained by Jim Lynch. About Jim...

    Categories

    All
    Actionscript 3
    Angular
    AngularJS
    Automated Testing
    AWS Lambda
    Behavior Driven Development
    Blogging
    Business Building
    C#
    C / C++
    ClojureScript / Clojure
    Coding
    Community Service
    CS Philosophy
    Css / Scss
    Dev Ops
    Firebase
    Fitness
    Flash
    Front End
    Functional Programming
    Git
    Go Lang
    Illustrations
    Java
    Javascript
    Lean
    Life
    Node.js
    Planning
    Productivity
    Professionalism
    Python
    React
    Redux / Ngrx
    Refactoring
    Reusable Components
    Shell Scripting
    Swift
    Test Driven Development
    TypeScript
    Useful Sites
    Useful Tools
    Video
    Website Development
    WebStorm
    Writing

    Archives

    April 2018
    March 2018
    February 2018
    January 2018
    December 2017
    November 2017
    October 2017
    September 2017
    August 2017
    July 2017
    May 2017
    April 2017
    March 2017
    February 2017
    January 2017
    December 2016
    November 2016
    October 2016
    September 2016
    August 2016
    July 2016
    June 2016
    May 2016
    April 2016
    March 2016
    February 2016
    January 2016
    December 2015
    November 2015
    October 2015

    RSS Feed


WoJ © 2015 - 2016
  • Blog
  • About Jim
✕