Display number in Million or Thousand format in angular 4

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

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