Displaying the number format in angular4

Question

I have written a custom pipe in angular 4. 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. Please note that it should also do the same for negative numbers and consider decimals.

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

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

  constructor() { }

   transform(number : any){
    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 ;
        }
    }

}

so what is the issue

Sajeetharan
– Sajeetharan

2018-02-04 18:41:40 +00:00
Commented Feb 4, 2018 at 18:41 — Sajeetharan
– Sajeetharan, Commented Feb 4, 2018 at 18:41
Its not doing negative numbers

Tom
– Tom

2018-02-04 18:42:13 +00:00
Commented Feb 4, 2018 at 18:42 — Tom
– Tom, Commented Feb 4, 2018 at 18:42
and do not think it would do decimals

Tom
– Tom

2018-02-04 18:43:29 +00:00
Commented Feb 4, 2018 at 18:43 — Tom
– Tom, Commented Feb 4, 2018 at 18:43

Sajeetharan · Accepted Answer · 2019-08-05 04:46:58Z

You have actually done half of the implementation. One thing to add here is the condition for the negative numbers, you can do that by checking the starting character of the string to be '-', also you can add the decimal to be fixed as 1 , using Fixed(1);

Here is the complete pipe implementation,

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

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

  constructor() { }

   transform(number : any){
    let hasMinus = String(number).charAt(0) === '-' ? true:false;
    number =  String(number).charAt(0) === '-' ?
            + String(number).substring(1, number.length)  : number;
        // hundreds
        if(number <= 999){
          number = number ;
        }
        // thousands
        else if(number >= 1000 && number <= 999999){
          number = (number / 1000).toFixed(1) + 'K';
        }
        // millions
        else if(number >= 1000000 && number <= 999999999){
          number = (number / 1000000).toFixed(1) + 'M';
        }
        // billions
        else if(number >= 1000000000 && number <= 999999999999){
          number = (number / 1000000000).toFixed(1) + 'B';
        }
        if(hasMinus){
          return '-'+number;
        }else
        {
          return number;
        }
    }

}

STACKBLITZ DEMO

The conditions could be shorter: if (number < 1000), else if (number < 1000000), else if (number < 1000000000), etc.

Collectives™ on Stack Overflow

Displaying the number format in angular4

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related