Localize Date

Pipe

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

registerLocaleData(localeHu);

{{ date | date : 'fullDate' : '' : 'hu' }}

{{ date | date: 'yyyy.MM.dd. HH:mm' }}

Az Angular lehetőséget nyújt a dátumok, számok és más formázások lokalizációjára (azaz a kívánt nyelvre történő átfordítására). A magyar lokalizációhoz az alábbi lépéseket kell követned:

1. Magyar lokalizációs csomag telepítése

Először is telepítened kell a magyar lokalizációs csomagot:

npm install @angular/localize

2. Angular alkalmazás lokalizációjának beállítása

Ezt követően be kell állítanod az Angular alkalmazásodat a @angular/localize használatára. Ehhez a polyfills.ts fájlba kell hozzáadnod a következő sort:

import '@angular/localize/init';

3. Magyar lokalizációs fájl importálása

Majd importáld a magyar lokalizációs adatokat a modulodba, ahol használni szeretnéd a dátum lokalizációt. Például a app.module.ts-be:

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

registerLocaleData(localeHu);

4. Lokalizáció használata a komponensben

Most már a komponensben használhatod a magyar lokalizációt a date pipe-on belül:

{{ date | date:'short':'':'hu' }}

Itt a harmadik paraméter (‘hu’) határozza meg a lokalizációt.

5. Lokalizáció globális beállítása

Ha nem szeretnél minden pipe-nál külön megadni a lokalizációt, beállíthatod globálisan a providers résznél az app.module.ts fájlban:

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

@NgModule({
  declarations: [
    // ... komponenseid
  ],
  imports: [
    // ... moduljaid
  ],
  providers: [
    { provide: LOCALE_ID, useValue: 'hu' }
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Alapértelmezett nyelv beállítása

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

registerLocaleData(localeHu);

@Component({
  standalone: true,
  imports: [PublishPipe, CommonModule, ReactiveFormsModule],
  providers: [{ provide: LOCALE_ID, useValue: 'hu' }],
  selector: 'app-pipe',
  templateUrl: './pipe.component.html',
  styleUrls: ['./pipe.component.scss'],
})

Ezzel a beállítással már nem kell a pipe-nál megadnod a ‘hu’ értéket:

{{ date | date:'short' }}

Ezekkel a lépésekkel a dátumok magyar formátumban fognak megjelenni az alkalmazásodban.