typescript – How to use LOCALE_ID 'es-ES' in ionic 2?

Question:

I have a project in:

Ionic Framework: 3.9.2
Ionic App Scripts: 3.1.8
Angular Core: 5.0.3
Angular Compiler CLI: 5.0.3
Node: 6.7.0
OS Platform: Windows 8.1
Navigator Platform: Win32
User Agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36

and I have to represent a monetary figure in Colombian pesos, for that I use the currency pipe {{variable | currency:'COP':'0.0-0'}} , but the result is the following $3,055.70 but they require that the thousands separator be with . and the one for decimals with , , I have read the currency documentation and it says that the locale variable must be configured in the following way {{variable | currency:'COP':'0.0-0':'es'}} but this causes the following error:

ERROR Error: Missing locale data for the locale "es".
    at findLocaleData (common.js:1475)
    at getLocaleNumberFormat (common.js:1318)
    at formatNumber$1 (common.js:4913)
    at CurrencyPipe.transform (common.js:6151)
    at checkAndUpdatePureExpressionInline (core.js:12908)
    at checkAndUpdateNodeInline (core.js:13602)
    at checkAndUpdateNode (core.js:13541)
    at debugCheckAndUpdateNode (core.js:14413)
    at debugCheckRenderNodeFn (core.js:14392)
    at Object.eval [as updateRenderer] (PPendonPage.html:197)

I have also tried to change the default language of the app, from 'en-US' to 'es-ES' as follows,

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { LOCALE_ID } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ListPage } from '../pages/list/list';


import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    ListPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp, {
      backButtonText: '',
      mode: 'ios',
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    ListPage    
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    {provide: LOCALE_ID, useValue: 'es-ES' }
  ]
})
export class AppModule {}

in the same way the error comes out:

Error: Missing locale data for the locale "es-ES".
    at findLocaleData (http://localhost:8100/build/vendor.js:45511:11)
    at getLocaleNumberFormat (http://localhost:8100/build/vendor.js:45354:33)
    at formatNumber$1 (http://localhost:8100/build/vendor.js:48949:35)
    at CurrencyPipe.transform (http://localhost:8100/build/vendor.js:50187:18)
    at checkAndUpdatePureExpressionInline (http://localhost:8100/build/vendor.js:13255:38)
    at checkAndUpdateNodeInline (http://localhost:8100/build/vendor.js:13955:20)
    at checkAndUpdateNode (http://localhost:8100/build/vendor.js:13894:16)
    at debugCheckAndUpdateNode (http://localhost:8100/build/vendor.js:14766:76)
    at debugCheckRenderNodeFn (http://localhost:8100/build/vendor.js:14745:13)
    at Object.eval [as updateRenderer] (ng:///AppModule/PPendonPage.ngfactory.js:736:48)

How do I use {provide: LOCALE_ID, useValue: 'es-ES' } correctly?

Answer:

You have to import the " Locale " that you need to use, as well as include " LOCALE_ID " as provider:

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

    import es from '@angular/common/locales/es';
    import { registerLocaleData } from '@angular/common';

    registerLocaleData(es);

@NgModule({
..
providers: [ { provide: LOCALE_ID, useValue: 'es-*' } ]
..
})

Being * the code of the country you want to use [MX, AR, ES] being as follows providers: [ { provide: LOCALE_ID, useValue: 'es-MX' } ]

You can see the available locations here

Post Views: 2
Scroll to Top