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:

LanguagePackage Name
Arabicar_EG
Armenianhy_AM
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
Georgianka_GE
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 { 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 { }