How to split numbers in Angular?

Question

In the input I have a number:1000000 or 1000

I want to format it to: 1 000 000 or 1 000 respectively.

I tried to use a Pipe but it did not work out, what could be the problem?

{{  value | number : '1.1-10'}}

Can you show the pipe you tried to use / write ? – rjdkolb Sep 04 '17 at 03:58 — rjdkolb, Sep 04 '17 at 03:58
@rjdkolb i add to question – Valitskiy Dmitriy Sep 04 '17 at 04:04 — Valitskiy Dmitriy, Sep 04 '17 at 04:04

score 3 · Accepted Answer · answered Sep 04 '17 at 04:11

3

You can use the number pipe like this,

   <h1>{{value | number:'.2'}}</h1>

DEMO

answered Sep 04 '17 at 04:11

Sajeetharan

203,447
57
330
376

The demo is broken. – Mark Sep 04 '17 at 04:17
1

https://imgur.com/a/5FsJ0 – Mark Sep 04 '17 at 04:22
Thanks you! This works with h1, but how does it use this input? – Valitskiy Dmitriy Sep 04 '17 at 04:23
pipes are used for displaying, you cannot use it for masking, you need to implement a directive as described here https://stackoverflow.com/questions/40348290/angular-2-issues-with-number-pipe-on-input – Sajeetharan Sep 04 '17 at 04:24
I try use this, but in this row: var valArray = this.el.nativeElement.value.split('.') : []; Error ", expected" I just copied that code that is, what could be the problem? – Valitskiy Dmitriy Sep 04 '17 at 04:47
did you check the plunker attached in that link ? – Sajeetharan Sep 04 '17 at 04:49
Yes, i see this plunker, i fix it. But when i enter a number, an error: The specified value "5,234" is not a valid number. The value must match to the following regular expression: -?(\d+|\d+\.\d+|\.\d+)([eE][-+]?\d+)? – Valitskiy Dmitriy Sep 04 '17 at 04:51

score 0 · Answer 2 · answered Sep 04 '17 at 07:02

To reproduce in this format, do the following:

HTML

{{  value | number : '1.0-0'}}  /* 0 decimal digits */

{{  value | number : '1.1-10'}} /*1.1-10 means: at least one digit before decimal point, at least 1 digit after decimal point but no more than 10 digits.*/

app.module.ts

import { LOCALE_ID } from '@angular/core';

...
   @NgModule({
....    
providers: [{ provide: LOCALE_ID, useValue: 'fr-FR' },....
// or your country local. For the thousands delimitation as space 'fr' works

Output

1 000 000

score -1 · Answer 3 · answered Aug 23 '19 at 01:29

-1

public splitNumber(humidity: number):string {
    if(humidity == 0){
      return 0+"";
    }
    var str = humidity.toString();
    var numarray = str.split('.');
    var a = new Array();
    a = numarray;
    return a[0] +"."+this.numberFist(parseInt(a[1],10));
  }

answered Aug 23 '19 at 01:29

Tienanhvn

141
5
9

1

This just looks like a cut and paste that doesn't match the question, it doesn't do the second space for 1 000 000 for example. – Steve Aug 23 '19 at 01:48

How to split numbers in Angular?

3 Answers3