Display number in Million or Thousand format in an

Question

I am trying to display number format in my angular 4 application. Basically what i am looking at is if the number is in 12.23 millions then it should display For e.g 12.2M (One decimal place)

If the number is 50,000.123 then 50.1K

How do i achieve that in angular. Do I need to write a directive ? Are there any inbuilt pipes in angular ?

structure

export interface NpvResults  {

            captiveInsYear: number[];
            captiveInsPremiumPaid: number[];
            captiveInsTaxDeduction: number[];
            captiveInsLoanToParent: number[];
            captiveInsCapitalContribution: number[];
            captiveDividentDistribution: number[];
            captiveInsTerminalValue: number[];

        }

The array is initialized to the following value

this.sourceResults.captiveInsPremiumPaid = [1,2,3,4,5];

The html

<td *ngFor= "let item of NpvResults.captiveInsPremiumPaid" >{{item}}</td>

Answer 1

you can create PIPE

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'thousandSuff'
})
export class ThousandSuffixesPipe implements PipeTransform {

  transform(input: any, args?: any): any {
    var exp, rounded,
      suffixes = ['k', 'M', 'G', 'T', 'P', 'E'];

    if (Number.isNaN(input)) {
      return null;
    }

    if (input < 1000) {
      return input;
    }

    exp = Math.floor(Math.log(input) / Math.log(1000));

    return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];


  }

}

implement in the view

{{ model | thousandSuff  }} <!-- 0 decimals -->

{{ model | thousandSuff : 2  }}  <!-- X decimals -->

result

{{ 22600000 | thousandSuff }} -> 23M

{{ 22600000 | thousandSuff : 2 }} -> 22.60M

Answer 2

I write the below pipe, it will handle all of the negative scenarios( Negative numbers, Strings, blank) as well. And works best in all of the cases. Complete Article here.

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'numberSuffix'
})
export class NumberSuffixPipe implements PipeTransform {
  transform(input: any, args?: any): any {
    let exp;
    const suffixes = ['K', 'M', 'B', 'T', 'P', 'E'];
    const isNagtiveValues = input < 0;
    if (Number.isNaN(input) || (input < 1000 && input >= 0) || !this.isNumeric(input) || (input < 0 && input > -1000)) {
      if (!!args && this.isNumeric(input) && !(input < 0) && input != 0) {
        return input.toFixed(args);
      } else {
        return input;
      }
    }

    if (!isNagtiveValues) {
      exp = Math.floor(Math.log(input) / Math.log(1000));

      return (input / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
    } else {
      input = input * -1;

      exp = Math.floor(Math.log(input) / Math.log(1000));

      return (input * -1 / Math.pow(1000, exp)).toFixed(args) + suffixes[exp - 1];
    }
  }
  isNumeric(value): boolean {
    if (value < 0) value = value * -1;
    if (/^-{0,1}\d+$/.test(value)) {
      return true;
    } else if (/^\d+\.\d+$/.test(value)) {
      return true;
    } else {
      return false;
    }
  }
}

Answer 3

The easiest way is to make a pipe and a service. You can do the actually formatting in service using numeral js library and import that service in the pipe and apply formatting in transform method.

import { Pipe, PipeTransform } from '@angular/core';
import { NumberFormatService } from '../utils/number-format.service';

@Pipe({
  name: 'numberFormat'
})
export class NumberFormatPipe implements PipeTransform {

  constructor(private nF: NumberFormatService) {}

  transform(value: any, args?: any): any {
    if(args == "commas"){
      return this.nF.addCommas(value);
    }
    else if(args == "kmb"){
      return this.nF.addKMB(value);
    }
    return value;
  }

}

import { Injectable } from '@angular/core';
import * as numeral from 'numeral';

@Injectable({
  providedIn: 'root'
})
export class NumberFormatService {

  constructor() { }

  public addCommas(val){
    return numeral(val).format('0,0');
  }

  public addKMB(val){
    return numeral(val).format('0[.]00a');
  }
}

html template file
{{dailyData.avgDaily | numberFormat: 'commas'}}
{{dailyData.avgDaily | numberFormat: 'kmb'}}

1. You can get numeral js dependency documentation from official site link.
2. You can install numeraljs in the angular application using npm install numeral --save

Answer 4

Here I just give you an idea first create
Html
{{number | shortNumber}}
you can create your own custom pipe filter in which you can pass your number in the pipe and then, you can do code like below, put this logic in your custom pipe.

Pipe filter

getformat(){
    if(number == 0) {
    return 0;
}
else
{        
  // hundreds
  if(number <= 999){
    return number ;
  }
  // thousands
  else if(number >= 1000 && number <= 999999){
    return (number / 1000) + 'K';
  }
  // millions
  else if(number >= 1000000 && number <= 999999999){
    return (number / 1000000) + 'M';
  }
  // billions
  else if(number >= 1000000000 && number <= 999999999999){
    return (number / 1000000000) + 'B';
  }
  else
    return number ;
  }
}

you can do like this.For creating custom pipe you can refer to this siteclick here