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.

Providers#

ng-zorro-antd provides several configuration tokens for global configuration of international copy and date, NZ_I18N for 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';

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

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
}

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:

LanguagePackage Name
Arabicar_EG
Bulgarianbg_BG
Catalanca_ES
Czechcs_CZ
Denmarkda_DK
Germande_DE
Greekel_GR
English (Global)en_GB
Englishen_US
Spanishes_ES
Estonianet_EE
Persianfa_IR
Finnishfi_FI
French (Belgium)fr_BE
French (France)fr_FR
Hebrewhe_IL
Croatianhr_HR
Hindihi_IN
Hungarianhu_HU
Indonesianid_ID
Italianit_IT
Icelandicis_IS
Japaneseja_JP
Kannadakn_IN
Koreanko_KR
Kurdishku_IQ
Latvianlv_LV
Malayms_MY
Mongolianmn_MN
Norwegiannb_NO
Nepalne_NP
Dutch (Belgium)nl_BE
Dutchnl_NL
Polishpl_PL
Portuguese (Brazil)pt_BR
Portuguesept_PT
Slovaksk_SK
Serbiansr_RS
Sloveniansl_SI
Swedishsv_SE
Tamilta_IN
Thaith_TH
Turkishtr_TR
Romanianro_RO
Russianru_RU
Ukrainianuk_UA
Vietnamesevi_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 * as enDateLocale from 'date-fns/locale/en';
import * as jaDateLocale from 'date-fns/locale/ja';

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

  ...

  switchLanguage() {
    this.i18n.setDateLocale(jaDateLocale); // 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);

Language supported by date-fns#

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