John Liu .NET

View Original

Simple custom Angular (Angular2) Pipe that extends Number

We have a lot of code that looks like this in our new Angular (Angular2) module:

See this content in the original post

The main reason is that we just want to display numbers in 1.2 million, not 1200,000.

So obviously, we think about wrapping this in a custom Pipe function.

number is a Pipe name for the DecimalPipe class.  So we can extend that and borrow all the work the DecimalPipe does with parsing and formatting.

See this content in the original post

The Angular2 template then simplifies down to:

See this content in the original post

It is so nice to work with a Proper Object-Oriented language like TypeScript here.  Look at that extends.  <3