4 votes

How to change date language Data pipe Angular 6?

I would like to change the language of the date of my app to be from argentina, I tried with this configuration looking at the angular documentation but still no change. It remains the default setting which is en-US. It does not show me any error in the console

app.module.ts

import { registerLocaleData } from '@angular/common';
import localeEsAr from '@angular/common/locales/es-AR';
registerLocaleData(localeEsAr);

app.component.html

<td>{{resultado.date?.seconds * 1000| date:'fullDate'}}</td>

18voto

victor dencowski Points 449

What you need to do is to import the angular common locals, also register them to be able to use them, that should solve your error of

'Missing locale data for the locale "es-AR"'

and if you still get the same error check your local folder if it contains es-Ar, in your case you should only import es-Ar, in my example it shows several other locals

    import { LOCALE_ID, NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { AppComponent } from '../src/app/app.component';
    import { registerLocaleData } from '@angular/common';

    // importar locales
    import localePy from '@angular/common/locales/es-PY';
    import localePt from '@angular/common/locales/pt';
    import localeEn from '@angular/common/locales/en';
    import localeEsAr from '@angular/common/locales/es-AR';

    // registrar los locales con el nombre que quieras utilizar a la hora de proveer
    registerLocaleData(localePy, 'es');
    registerLocaleData(localePt, 'pt');
    registerLocaleData(localeEn, 'en')
    registerLocaleData(localeEsAR, 'es-Ar');

    @NgModule({
      imports: [ BrowserModule ],
      declarations: [ AppComponent ],
      // Aqui usas el nombre que hayas colocado al locale, en este caso es-Ar o pt o en, etc
      providers: [ { provide: LOCALE_ID, useValue: 'es-Ar' } ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }

0voto

Victoria Ruiz Points 269

The problem is how you are setting up the localization. From the official documentation, this is what goes in app.module.ts :

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

import { AppComponent } from '../src/app/app.component';

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

The method you use to register the locale, I understand that it is useful if you are going to use multiple locations and not just one.

In that case, you would have to indicate which locale you are going to use in the pipe.

HolaDevs.com

HolaDevs is an online community of programmers and software lovers.
You can check other people responses or create a new question if you don't find a solution

Powered by:

X