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,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

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,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

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,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

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,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

edited Jul 5 '17 at 20:05

CodeWarrior

1,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

edited Jul 5 '17 at 20:05

CodeWarrior

1,50321016

edited Jul 5 '17 at 20:05

CodeWarrior

1,50321016

edited Jul 5 '17 at 20:05

CodeWarrior

1,50321016

asked Jul 5 '17 at 14:38

BeingSuman

81911333

asked Jul 5 '17 at 14:38

BeingSuman

81911333

asked Jul 5 '17 at 14:38

BeingSuman

81911333

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

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

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

add a comment |

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

Reference link

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

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

497412

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

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

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

add a comment |

Use DecimalPipe like this

{{attr | number}}

Working Plunker

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

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

add a comment |

Use DecimalPipe like this

{{attr | number}}

Working Plunker

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

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

Use DecimalPipe like this

{{attr | number}}

Working Plunker

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

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

edited Jan 1 at 4:10

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

answered Jul 5 '17 at 14:46

CodeWarrior

1,50321016

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

add a comment |

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

Plunker doesn't work

– renathy
Dec 27 '18 at 10:15

@renathy Plunker has been updated

– CodeWarrior
Dec 27 '18 at 14:17

add a comment |

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

Reference link

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

add a comment |

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

Reference link

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

add a comment |

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

Reference link

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

Reference link

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

function printNo() {

  document.getElementById('text').innerHTML =

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

}

 <!DOCTYPE html>

 <html>

    <head></head>

    

     <body onload="printNo()">

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

        

     </body>

</html>

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

edited Jan 1 at 4:34

Prashant Pimpale

3,5153933

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

answered Jul 5 '17 at 15:29

JGFMK

3,69743061

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

497412

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

497412

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

497412

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

497412

answered Jul 5 '17 at 14:48

Sebastian Giro

497412

answered Jul 5 '17 at 14:48

Sebastian Giro

497412

answered Jul 5 '17 at 14:48

Sebastian Giro

497412

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.

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

Search This Blog

Ufyukyu