To improve readability instead of displaying full numbers very often there is a need to display shortened numbers. Here is an example of how to create your own customisable short number pipe in Angular8. What Are Pipes? Pipe in Angular is a data processing element which is used in a presentation layer (in a template). All pipes must implement PipeTransform interface. PipeTransform interface contains a method called “ ” which is invoked by Angular with a value passed as a first argument and optional parameters as a second argument. transform() Pipes can be joined into a set of pipes. In such case output of the previous pipe will be input for the next one. is an example of how pipe may be used in your templates to change representation. {{item.count | shortNumber}} item.count Create a Custom Pipe : Display text “1.5M” instead of 1500000 in the view. Task : generate custom pipe and implement short number functionality. Solution A command to generate new pipe in directory: shortNumber pipes/ ng generate pipe pipes/shortNumber The command above creates file and registers in modules declarations. pipes/short-number.pipe.ts ShortNumberPipe { Pipe, PipeTransform } ; ({ name: }) ShortNumberPipe PipeTransform { transform(value: , args?: ): { ; } } // short-number.pipe.ts import from '@angular/core' @Pipe 'shortNumber' export class implements any any any return null class must implement interface which is common interface for all Angular pipes. ShortNumberPipe PipeTransform interface requires single method to be implemented. See short number functionality implementation below. PipeTransform transform() transform(value: , args?: ): { (value === ) ; (value === ) ; fractionSize = ; abs = .abs(value); rounder = .pow( , fractionSize); isNegative = value < ; key = ; powers = [{ key: , value: .pow( , ) }, { key: , value: .pow( , ) }, { key: , value: .pow( , ) }, { key: , value: .pow( , ) }, { key: , value: }]; ( i = ; i < powers.length; i++) { reduced = abs / powers[i].value; reduced = .round(reduced * rounder) / rounder; (reduced >= ) { abs = reduced; key = powers[i].key; ; } } (isNegative ? : ) + abs + key; } any any any if null return null if 0 return "0" var 1 var Math var Math 10 var 0 var '' var "Q" Math 10 15 "T" Math 10 12 "B" Math 10 9 "M" Math 10 6 "k" 1000 for var 0 var Math if 1 break return '-' '' In the example above “ ” stands for quadrillion, “ ” — trillion, “ ” — billion, “ ” — million, “ ” — kilo. Q T B M k And hardcoded defines the precision of rounding numbers. You are welcome to adjust it to your needs. fractionSize Test Usage Lets check the result with this piece of html: {{1500000 | shortNumber}} < = > span class ”cnt-wrap” </ > span After interpolation it displays 1.5M. And if substitute 1500000 with 15300 the result of number transformation will be 15.3k. Done! ToDo As your homework, make pipe parametrised. For instance, you can do this with a passed as an argument. Take a look in the for help. shortNumber fractionSize docs After the changes, must produce 1.52M ( is set to 2). {{1520000 | shortNumber:2}} fractionSize : before starting a new pipe, check for existing one in ! However, the list of available pipes isn’t big yet. Tip built-in pipes Hopefully, this article was useful! Thanks for reading! Previously published at https://medium.com/front-end-weekly/creating-a-short-number-format-pipe-in-angular-8a2c973c87c2
