Angular: Formatting numbers with commas

Title very much sums up my needs.

123456789 => 123,456,789

12345 => 12,345

What's the best way to get this conversion ? Don't suggest currency pipe in Angular-2 as I don't need $ or currency symbol to be prepend to my output.

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

1

Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– gforce301
Jul 5 '17 at 14:41

1

@gforce301 It's a different enviroment, the op wanted a solution for angular2 too, as CodeWarrior answered with a pipe solution.
– Sebastian Giro
Jul 5 '17 at 15:16

add a comment |

Title very much sums up my needs.

123456789 => 123,456,789

12345 => 12,345

What's the best way to get this conversion ? Don't suggest currency pipe in Angular-2 as I don't need $ or currency symbol to be prepend to my output.

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

1

Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– gforce301
Jul 5 '17 at 14:41

1

@gforce301 It's a different enviroment, the op wanted a solution for angular2 too, as CodeWarrior answered with a pipe solution.
– Sebastian Giro
Jul 5 '17 at 15:16

add a comment |

Title very much sums up my needs.

123456789 => 123,456,789

12345 => 12,345

What's the best way to get this conversion ? Don't suggest currency pipe in Angular-2 as I don't need $ or currency symbol to be prepend to my output.

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

Title very much sums up my needs.

123456789 => 123,456,789

12345 => 12,345

What's the best way to get this conversion ? Don't suggest currency pipe in Angular-2 as I don't need $ or currency symbol to be prepend to my output.

javascript angular typescript

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

edited Jul 5 '17 at 20:05

CodeWarrior

1,4632916

asked Jul 5 '17 at 14:38

BeingSuman

75911233

asked Jul 5 '17 at 14:38

BeingSuman

75911233

asked Jul 5 '17 at 14:38

BeingSuman

75911233

1

Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– gforce301
Jul 5 '17 at 14:41

1

@gforce301 It's a different enviroment, the op wanted a solution for angular2 too, as CodeWarrior answered with a pipe solution.
– Sebastian Giro
Jul 5 '17 at 15:16

add a comment |

1

Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– gforce301
Jul 5 '17 at 14:41

1

@gforce301 It's a different enviroment, the op wanted a solution for angular2 too, as CodeWarrior answered with a pipe solution.
– Sebastian Giro
Jul 5 '17 at 15:16

Possible duplicate of How to print a number with commas as thousands separators in JavaScript
– gforce301
Jul 5 '17 at 14:41

@gforce301 It's a different enviroment, the op wanted a solution for angular2 too, as CodeWarrior answered with a pipe solution.
– Sebastian Giro
Jul 5 '17 at 15:16

add a comment |

3 Answers
3

active

oldest

votes

Use DecimalPipe like this

{{attr | number}}

Working Plunker (Updated rxjs version in Plunker to get it back up and running)

Documentation available at https://angular.io/api/common/DecimalPipe

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

add a comment |

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript">

     function printNo() {

         document.getElementById('text').innerHTML =

         Number(1234355).toLocaleString('en-GB');

      }

    </script>

  </head>



  <body onload="printNo()">

    <h1 id="text"></h1>



  </body>



</html>

https://plnkr.co/edit/OU0koo2r1YuKC1rC3tpN?p=preview
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

add a comment |

Without using pipes, a simple way to answer your question with javascript:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

And this will output Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

But I think you formulated your question bad, so, If you want to parse numbers, you should use this function:

function numberWithCommas(x) {

    var parts = x.toString().split(".");

    parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");

    return parts.join(".");

}

var num = numberWithCommas(1234567);

console.log(num);

This will output 1,234,567

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f44929282%2fangular-formatting-numbers-with-commas%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Use DecimalPipe like this

{{attr | number}}

Working Plunker (Updated rxjs version in Plunker to get it back up and running)

Documentation available at https://angular.io/api/common/DecimalPipe

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

add a comment |

Use DecimalPipe like this

{{attr | number}}

Working Plunker (Updated rxjs version in Plunker to get it back up and running)

Documentation available at https://angular.io/api/common/DecimalPipe

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

add a comment |

Use DecimalPipe like this

{{attr | number}}

Working Plunker (Updated rxjs version in Plunker to get it back up and running)

Documentation available at https://angular.io/api/common/DecimalPipe

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

Use DecimalPipe like this

{{attr | number}}

Working Plunker (Updated rxjs version in Plunker to get it back up and running)

Documentation available at https://angular.io/api/common/DecimalPipe

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

edited Dec 27 at 14:18

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

answered Jul 5 '17 at 14:46

CodeWarrior

1,4632916

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

add a comment |

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

Plunker doesn't work
– renathy
Dec 27 at 10:15

@renathy Plunker has been updated
– CodeWarrior
Dec 27 at 14:17

add a comment |

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript">

     function printNo() {

         document.getElementById('text').innerHTML =

         Number(1234355).toLocaleString('en-GB');

      }

    </script>

  </head>



  <body onload="printNo()">

    <h1 id="text"></h1>



  </body>



</html>

https://plnkr.co/edit/OU0koo2r1YuKC1rC3tpN?p=preview
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

add a comment |

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript">

     function printNo() {

         document.getElementById('text').innerHTML =

         Number(1234355).toLocaleString('en-GB');

      }

    </script>

  </head>



  <body onload="printNo()">

    <h1 id="text"></h1>



  </body>



</html>

https://plnkr.co/edit/OU0koo2r1YuKC1rC3tpN?p=preview
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

add a comment |

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript">

     function printNo() {

         document.getElementById('text').innerHTML =

         Number(1234355).toLocaleString('en-GB');

      }

    </script>

  </head>



  <body onload="printNo()">

    <h1 id="text"></h1>



  </body>



</html>

https://plnkr.co/edit/OU0koo2r1YuKC1rC3tpN?p=preview
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

<!DOCTYPE html>

<html>

  <head>

    <script type="text/javascript">

     function printNo() {

         document.getElementById('text').innerHTML =

         Number(1234355).toLocaleString('en-GB');

      }

    </script>

  </head>



  <body onload="printNo()">

    <h1 id="text"></h1>



  </body>



</html>

https://plnkr.co/edit/OU0koo2r1YuKC1rC3tpN?p=preview
https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

answered Jul 5 '17 at 15:29

JGFMK

3,13742854

add a comment |

Without using pipes, a simple way to answer your question with javascript:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

And this will output Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

But I think you formulated your question bad, so, If you want to parse numbers, you should use this function:

function numberWithCommas(x) {

    var parts = x.toString().split(".");

    parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");

    return parts.join(".");

}

var num = numberWithCommas(1234567);

console.log(num);

This will output 1,234,567

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

add a comment |

Without using pipes, a simple way to answer your question with javascript:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

And this will output Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

But I think you formulated your question bad, so, If you want to parse numbers, you should use this function:

function numberWithCommas(x) {

    var parts = x.toString().split(".");

    parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");

    return parts.join(".");

}

var num = numberWithCommas(1234567);

console.log(num);

This will output 1,234,567

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

add a comment |

Without using pipes, a simple way to answer your question with javascript:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

And this will output Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

But I think you formulated your question bad, so, If you want to parse numbers, you should use this function:

function numberWithCommas(x) {

    var parts = x.toString().split(".");

    parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");

    return parts.join(".");

}

var num = numberWithCommas(1234567);

console.log(num);

This will output 1,234,567

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

Without using pipes, a simple way to answer your question with javascript:

var str = "The quick brown fox jumps over the lazy dogs.".replace(/(.{2})/g,"$1,");

And this will output Th,e ,qu,ic,k ,br,ow,n ,fo,x ,ju,mp,s ,ov,er, t,he, l,az,y ,do,gs,.

But I think you formulated your question bad, so, If you want to parse numbers, you should use this function:

function numberWithCommas(x) {

    var parts = x.toString().split(".");

    parts[0] = parts[0].replace(/B(?=(d{3})+(?!d))/g, ",");

    return parts.join(".");

}

var num = numberWithCommas(1234567);

console.log(num);

This will output 1,234,567

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

answered Jul 5 '17 at 14:48

Sebastian Giro

488412

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Bdtjtk