Home / Questions / 194958
Accepted
Fabricio Loupias
Asked: 2020-09-08 08:31:26 +0800 CST 2020-09-08 08:31:26 +0800 CST

How to change date language Data pipe Angular 6?

  • 772

I would like to change the language of the date of my app so that it is from Argentina, I tried with this configuration seeing the angular documentation but it still does not change. The default setting is en-US. It does not show me any error by 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>
angular

2 Answers

  1. Best Answer

    What you are missing is to import the locales from angular common locales, also register them so you can use them, that should fix your error

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

    and if you keep getting the same error, check your locales folder if it contains es-Ar, in your case you should only import es-Ar, in my example it shows several other locales

        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 { }
    • 21

  2. The problem is how you are setting the localization. From the official documentation, this is what goes into 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 that 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.

    • 0