[Angular] Locale 을 이용한 날짜, 숫자 포맷 지정하기

Angular 에서 날짜, 숫자 등에 대한 포맷을 Locale 을 이용해서 셋팅할 수 있습니다.

 

Angular 공식 홈페이지에서는 아래와 같이 나와 있습니다

https://angular.io/api/core/LOCALE_ID

Angular

import { LOCALE_ID } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';

platformBrowserDynamic().bootstrapModule(AppModule, {
  providers: [{provide: LOCALE_ID, useValue: 'en-US' }]
});

 

저는 인도네시아의 시스템들을 주로 개발하기 때문에 관련한 셋팅을 해야했습니다.

방식은 app.module.ts 에 셋팅하고 전체 사이트에 반영하는 형태로 개발해서 사용하고 있습니다.

 

app.module.ts

import { NgModule, LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import localeId from '@angular/common/locales/id'; // for indonesian

registerLocaleData(localeId, 'id');	// for indonesian

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [ ... ],
  providers: [
    { provide: LOCALE_ID, useValue: "id-ID" },	// for indonesian
    ....
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

 

원하는 지역의 Locale 아이디를 찾아서 넣어주시면 됩니다.

이렇게 셋팅을 하신 후에 html 에서 pipe 를 이용해서 포맷을 잡아주시면 해당 로케일에 맞춰서 보여주게 됩니다.

https://angular.io/guide/i18n-common-format-data-locale

Angular

 

공홈에서 설명을 잘 해주고 있는데요.

DatePipe, CurrencyPipe, DecimalPipe, PercentPipe 이렇게 4가지 파이프에서 로케일 값을 참조해서 사용하게 됩니다.

 

html 구문에서 다음과 같이 사용합니다.

<div>{{ row.created_at | date }}</div>
<div>{{ row.created_at | date: 'dd MMM HH:mm' }}</div>
<div>{{ row.created_at | date: 'dd/MM/yyyy HH:mm' }}</div>

<!-- Forced Locale ID -->
<div>{{ row.created_at | date: 'dd MMM HH:mm' : '' : 'en-US'  }}</div>

결과물은 다음과 같이 나타납니다.

Default Locale 을 통해 표현한 결과물

 

Locale을 강제로 지정한 경우 >> date: 'dd MMM HH:mm' : '' : 'en-US'

 

작은 도움이라도 되시길 바래요.