How can I by default display decimal numbers in Ionic/Angular app in correct locale number format?

user_12539963 0
Viewed 31

I work on an Ionic/Angular app that often needs to display decimal numbers on its pages. I have set LOCALE_ID in my app to be "cs". Therefore, I would expect that numbers will be displayed by using this locale. So, "1,000.23" should display as "1 000,23". But this is not the case.

I know that I can use DecimalPipe to set correct format on individual variables. But that would mean I would need to do it on every number I need to display. If possible, I would like to avoid that.

Here is what I did when trying to solve the problem.
In angular.json file I set these settings:

  "projects": {
    "app": {
      "i18n": {
        "sourceLocale": "cs"
      },
      "architect": {
        "build": {
          "options": {
            "localize": true,
          }

In app.module.ts I have added these rows:

import { LOCALE_ID } from '@angular/core';
import localeCs from '@angular/common/locales/cs';
import { registerLocaleData } from '@angular/common';


registerLocaleData(localeCs);

@NgModule({
  providers: [
    { provide: LOCALE_ID, useValue: 'cs' },
  ],
})

Now, as an example, I have these variables in one of my TS modules:

let float1=1501.321
let float2=34.42
let float3=2535478.9

I would display the numbers in corresponding HTML page in this way.

<ion-row>
  <ion-label> {{ float1 }} </ion-label>
</ion-row>

<ion-row>
  <ion-label> {{ float2 }} </ion-label>
</ion-row>

<ion-row>
  <ion-label> {{ float3 }} </ion-label>
</ion-row>

I want them displayed like this:

1 501,321
34,42
2 535 478,9

But for now, the only way I can achieve this is using pipe, like this:

<ion-label> {{ floatX | number:'1.0-3' }} </ion-label>

Is there a way how can I achieve correct number format by default? What am I missing?

ionic-framework angular format
1 Answers

You just need to add another parameter to number pipe like below!

html

<label> {{ float1 | number: '1.0-3':localeId }} </label><br /><label>
  {{ float2 | number: '1.0-3':localeId }} </label
><br /><label> {{ float3 | number: '1.0-3':localeId }} </label>

<br />
locale id: {{ localeId }}

ts

import { Component, Injector, LOCALE_ID } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  name = 'Angular';
  float1 = 1501.321;
  float2 = 34.42;
  float3 = 2535478.9;
  localeId: string;

  constructor(private injector: Injector) {
    this.localeId = this.injector.get(LOCALE_ID);
  }
}

app.module

import { LOCALE_ID, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello.component';
import localeCs from '@angular/common/locales/cs';
import { registerLocaleData } from '@angular/common';

registerLocaleData(localeCs);

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  providers: [{ provide: LOCALE_ID, useValue: 'cs' }],
})
export class AppModule {}

forked stackblitz

user_59245620
Related