i18n.en-US.md

order	title
4	Internationalization

The default language of ng-zorro-antd is Chinese as of yet. If you want to use other languages, you can follow the instructions below. You can also set the language with ng add ng-zorro-antd when creating project.

Default i18n Language

ng-zorro-antd provides several configuration tokens for global configuration of international copy and date, NZ_I18N for the international copy, and NZ_DATE_CONFIG for date-related features. In addition, we use Angular's language pack for date formatting by default (need to introduce the corresponding Angular language pack).

In addition, we also provide an optional NZ_DATE_LOCALE for date-fns mode to format local dates (depending on the [date-fns] (https://date-fns.org/docs/I18n) library, See How to use date-fns for date formatting) below.

/** config angular i18n **/
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

/** config ng-zorro-antd i18n **/
import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

/** set the default i18n config **/
@NgModule({
  providers   : [
    { provide: NZ_I18N, useValue: en_US }
  ]
})
export class AppModule { }

Work with Angular localize

When using @angular/localize, ng-zorro-antd could keep the same localization with angular via LOCALE_ID

/** import all locales data **/
import { LOCALE_ID } from '@angular/core';
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
import zh from '@angular/common/locales/zh';
registerLocaleData(en);
registerLocaleData(zh);

/** config ng-zorro-antd i18n **/
import { en_US, NZ_I18N, fr_FR } from 'ng-zorro-antd/i18n';

/** switch ng-zorro-antd locales via LOCALE_ID **/
@NgModule({
  providers   : [{
    provide: NZ_I18N,
    useFactory: (localId: string) => {
      switch (localId) {
        case 'en':
          return en_US;
        /** keep the same with angular.json/i18n/locales configuration **/
        case 'fr':
          return fr_FR;
        default:
          return en_US;
      }
    },
    deps: [LOCALE_ID]
  }]
})
export class AppModule { }

Service

ng-zorro-antd provides the service of NzI18nService to dynamic change the locale text.

import { en_US, NzI18nService } from 'ng-zorro-antd/i18n';
...
constructor(private i18n: NzI18nService) {
}

switchLanguage() {
  this.i18n.setLocale(en_US);
}

Note: en_US is the package name, follow below.

Supported languages:

Language	Package Name
Arabic	ar_EG
Armenian	hy_AM
Bulgarian	bg_BG
Catalan	ca_ES
Czech	cs_CZ
Denmark	da_DK
German	de_DE
Greek	el_GR
English (Global)	en_GB
English	en_US
Spanish	es_ES
Estonian	et_EE
Persian	fa_IR
Finnish	fi_FI
French (Belgium)	fr_BE
French (France)	fr_FR
Hebrew	he_IL
Croatian	hr_HR
Hindi	hi_IN
Hungarian	hu_HU
Indonesian	id_ID
Italian	it_IT
Icelandic	is_IS
Japanese	ja_JP
Georgian	ka_GE
Kazakh	kk_KZ
Kannada	kn_IN
Korean	ko_KR
Kurdish	ku_IQ
Latvian	lv_LV
Malay	ms_MY
Mongolian	mn_MN
Norwegian	nb_NO
Nepal	ne_NP
Dutch (Belgium)	nl_BE
Dutch	nl_NL
Polish	pl_PL
Portuguese (Brazil)	pt_BR
Portuguese	pt_PT
Slovak	sk_SK
Serbian	sr_RS
Slovenian	sl_SI
Swedish	sv_SE
Tamil	ta_IN
Thai	th_TH
Turkish	tr_TR
Romanian	ro_RO
Russian	ru_RU
Ukrainian	uk_UA
Vietnamese	vi_VN
Chinese (Simplified)	zh_CN
Chinese (Traditional)	zh_TW

How to format a date using date-fns

For date formatting, we use Angular's DatePipe (syntax reference to implement (depending on Angular's locale language pack), but due to Angular's own DatePipe is not implemented according to the ISO standard algorithm (issue #25380), the week number may not match expectations (related issues: #2406, #2819 ).

So we have a new date-fns method (syntax reference) for standard date formatting, you can switch to it by the following way (after switching, it will affect the date formatting of all date related components such as Calendar/DatePicker):

import { NzI18nService } from 'ng-zorro-antd/i18n';
import { enUS, ja } from 'date-fns/locale';

@NgModule({
  ...
  providers: [
    // Set the value of NZ_DATE_LOCALE in the application root module to activate date-fns mode
    { provide: NZ_DATE_LOCALE, useValue: enUS }
  ]
})
export class AppModule {
  constructor(private i18n: NzI18nService) { }

  ...

  switchLanguage() {
    this.i18n.setDateLocale(ja); // Switch language to Japanese at runtime
  }
}

After the switch is successful, you can also choose to remove the dependency on the Angular Locales package (remove the code below) to reduce the package size:

// The following code can be removed as needed
import { registerLocaleData } from '@angular/common';
import en from '@angular/common/locales/en';
registerLocaleData(en);

NZ_DATE_CONFIG (Date global configuration)

The default configuration is as follows:

{
  /** Specify which day is the beginning of the week (null for default, 0 for Sunday, 1 for Monday, and so on) */
  firstDayOfWeek: null
}

Language supported by date-fns

https://date-fns.org/docs/I18n#supported-languages

How to override internationalization configuration

The text of some components in ng-zorro depends on the internationalized text, such as the size changer in nz-pagination. At this time, you can modify the internationalization configuration to change the text content in the size changer:

import { NZ_I18N, en_US } from 'ng-zorro-antd/i18n';

const customLanguagePack = {
  en_US,
  ...{
    Pagination: {
      items_per_page: "per page"
    }
  }
}

@NgModule({
  ...
  providers   : [
    { provide: NZ_I18N, useValue: customLanguagePack }
  ]
})
export class AppModule { }