Display number value with comma instead of dot in <p-column> in Angular

Question

In my template I want to display the value (of type number) with commas as a decimal separator instead of dot. I have:

<p-column field="power" header="Power [MW]" [editable]="true">
  <ng-template let-col let-data="rowData" pTemplate="editor">
    <div>
      <input type="text" [(ngModel)]="data[col.field]" numbersOnly digits="35" decimals="3">
    </div>
  </ng-template>
  <ng-template let-col let-data="rowData" pTemplate="body">
    <div>
      <span>{{ data[col.field] }}</span>
    </div>
  </ng-template>
</p-column>

But this displays the numbers with dots, like "10.3" in both: editor and display mode. What I need is to display the values with comma, like "10,3". How can I do that?

Answer 1

I had to struggle with this with an app that received all data from SAP with numbers formatted with . instead of , as well. Here is the pipe I made to solve this, it is more overhead than adding a locale id and using the native angular decimal pipe

Here is a working stackblitz example of the pipe

/**
 * @Pipe
 * @description pipe to format numeric values to argentina readable currency values
 * @input number
 * @output formatted numeric value
 */

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

@Pipe({ 
    name: 'numberFormat'
 })
export class NumberFormatPipe implements PipeTransform {
    transform(value: any): number {
        return this.localeString(value);
    }

    missingOneDecimalCheck(nStr) {
        nStr += '';
        const x = nStr.split(',')[1];
        if (x && x.length === 1) return true;   
        return false;
    }

    missingAllDecimalsCheck(nStr) {
        nStr += '';
        const x = nStr.split(',')[1];
        if (!x) return true;    
        return false;
    }

    localeString(nStr) {
        if (nStr === '') return ''; 
        let x, x1, x2, rgx, y1, y2;
        nStr += '';
        x = nStr.split('.');
        x1 = x[0];
        x2 = x.length > 1 ? ',' + x[1] : '';
        rgx = /(\d+)(\d{3})/;
        while (rgx.test(x1)) {
            x1 = x1.replace(rgx, '$1' + '.' + '$2');
        }

        /** If value was inputed by user, it could have many decimals(up to 7)
            so we need to reformat previous x1 results */
        if (x1.indexOf(',') !== -1) {
            y1 = x1.slice(x1.lastIndexOf(',')).replace(/\./g, '');

            y2 = x1.split(',');
            x = y2[0] +  y1;
        } else {
            x = x1 + x2;
            if (this.missingOneDecimalCheck(x)) return x += '0';
            if (this.missingAllDecimalsCheck(x)) return x += ',00';
        }

        return x;
    }
}

And use it in your template like this:

{{ data[col.field] | numberFormat }}

Or in your component

constructor(private format: NumberFormatPipe) {}
...
let result = this.format.transform(some_number);

Dont forget to import and add to module declarations:

declarations: [NumberFormatPipe]

A heads up, this pipe includes some code to check decimals as well, since for my case I got values with and without decimals and in some cases up to 7 decimals so you could use it as is or edit it for your needs... but my guess is this will point you in the right direction at least.

Answer 2

You can always change the input field type to number

  <input type="number" [(ngModel)]="data[col.field]" numbersOnly digits="35" decimals="3">

it will automatically force it to only accept numbers.

Then if you don't need the up and down arrows you can use this piece of CSS to hide the arrows

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;

}

And then you can force angular to use a specific locale setting.

app.module.ts (for swedish locale)

import localeSv from '@angular/common/locales/sv';
import localeSvExtra from '@angular/common/locales/extra/sv';
registerLocaleData(localeSv, 'sv-SE', localeSvExtra)

and now all digits are magically represented with ',' and if you bind it to your model it will be bindable to a field of number type without any problems