Creating a Short Number Format Pipe Using Angular

In this blog, we will learn how 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 customizable short number pipe in Angular.

What Are Pipes?

Pipe in Angular is a data processing element that is used in a presentation layer (in a template). All pipes must implement the PipeTransform interface. PipeTransform interface contains a method called “transform()” which is invoked by Angular with a value passed as a first argument and optional parameters as a second argument.

Pipes can be joined into a set of pipes. In such a case output of the previous pipe will be input for the next one.

Let’s Start,

Create a Custom Pipe

Task: Display text “1.5M” instead of 1500000 in the view.

A command to generate a new “shortNumber” pipe in pipes/ directory:

ng generate pipe pipes/shortNumber

The above command creates the pipes/short-number.pipe.ts file and registers ShortNumberPipe in modules declarations.

// short-number.pipe.ts
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
  name: 'shortNumber'
})
export class ShortNumberPipe implements PipeTransform {
  transform(value: any, args?: any): any {
    return null;
  }
}

ShortNumberPipe class must implement the PipeTransform interface which is a common interface for all Angular pipes.

PipeTransform interface requires a single transform() method to be implemented. See short number functionality implementation below.

transform(number: number, args?: any): any {
    if (isNaN(number)) return null; // will only work value is a number
    if (number === null) return null;
    if (number === 0) return null;
    let abs = Math.abs(number);
    const rounder = Math.pow(10, 1);
    const isNegative = number < 0; // will also work for Negetive numbers
    let key = '';

    const powers = [
      { key: 'Q', value: Math.pow(10, 15) },
      { key: 'T', value: Math.pow(10, 12) },
      { key: 'B', value: Math.pow(10, 9) },
      { key: 'M', value: Math.pow(10, 6) },
      { key: 'K', value: 1000 }
    ];

    for (let i = 0; i < powers.length; i++) {
      let reduced = abs / powers[i].value;
      reduced = Math.round(reduced * rounder) / rounder;
      if (reduced >= 1) {
        abs = reduced;
        key = powers[i].key;
        break;
      }
    }
    return (isNegative ? '-' : '') + abs + key;
 }

In the example above code “Q” stands for quadrillion, “T” — trillion, “B” — billion, “M” — million, “k” — kilo. And hardcoded fractionize defines the precision of rounding numbers. You are welcome to adjust it as your needs.

Import Pipe

Import this pipe into the module.

@NgModule({
  declarations: [
    ShortNumberPipe
  ],
  imports: [
    CommonModule
  ],
  exports: [ShortNumberPipe]
})
export class SharedModule { }

Test Usage

Let’s check the result with this piece of HTML:

<h1>{{1500000 | shortNumber}}</h1>

After interpolation it displays 1.5M. And if substitute 1500000 with 15300 the result of number transformation will be 15.3k.