Internationalization

The default language of ng-zorro-antd is Chinese 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 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 { provideNzI18n, en_US } from 'ng-zorro-antd/i18n';

/** set the default i18n config **/
export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNzI18n(en_US)
  ]
}

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 **/
export const appConfig: ApplicationConfig = {
  providers: [{
    provide: NZ_I18N,
    useFactory: () => {
      const localId = inject(LOCALE_ID);
      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;
      }
    }
  }]
}

Service#

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

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

class DemoComponent {
  private i18n = inject(NzI18nService);

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

Note: en_US is the package name, follow below.

Supported languages:

Package NameLanguage
ar_EGArabic
az_AZAzerbaijani
bg_BGBulgarian
bn_BDBangla (Bangladesh)
by_BYBelarusian
ca_ESCatalan
cs_CZCzech
da_DKDanish
de_DEGerman
el_GRGreek
en_AUEnglish (Australia)
en_GBEnglish
en_USEnglish (America)
es_ESSpanish
et_EEEstonian
fa_IRPersian
fi_FIFinnish
fr_BEFrench (Belgium)
fr_CAFrench (Canada)
fr_FRFrench (France)
ga_IEIrish Gaelic
gl_ESGalician (Spain)
he_ILHebrew
hi_INHindi
hr_HRCroatian
hu_HUHungarian
hy_AMArmenian
id_IDIndonesian
is_ISIcelandic
it_ITItalian
ja_JPJapanese
ka_GEGeorgian
kk_KZKazakh
km_KHKhmer
kmr_IQKurmanji
kn_INKannada
ko_KRKorean
ku_IQKurdish
lt_LTLithuanian
lv_LVLatvian
mk_MKMacedonian
ml_INMalayalam (India)
mn_MNMongolian
ms_MYMalay
nb_NONorwegian
ne_NPNepali
nl_BEDutch (Belgium)
nl_NLDutch
pl_PLPolish
pt_BRPortuguese (Brazil)
pt_PTPortuguese
ro_RORomanian
ru_RURussian
sk_SKSlovak
sl_SISlovenian
sr_RSSerbian
sv_SESwedish
ta_INTamil
th_THThai
tr_TRTurkish
uk_UAUkrainian
ur_PKUrdu (Pakistan)
vi_VNVietnamese
zh_CNChinese (Simplified)
zh_HKChinese (Traditional)
zh_TWChinese (Traditional)

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):

// Set the value of NZ_DATE_LOCALE in the `app.config.ts` to activate date-fns mode
import { enUS, ja } from 'date-fns/locale';

export const appConfig: ApplicationConfig = {
  providers: [
    { provide: NZ_DATE_LOCALE, useValue: enUS }
  ]
}

// Switch language to Japanese at runtime
import { NzI18nService } from 'ng-zorro-antd/i18n';

export class AppComponent{
  private i18n = inject(NzI18nService);

  switchLanguage() {
    this.i18n.setDateLocale(ja);
  }
}

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 { en_US, provideNzI18n } from 'ng-zorro-antd/i18n';

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

export const appConfig: ApplicationConfig = {
  providers: [
    provideNzI18n(customLanguagePack)
  ]
}