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

/** set the default i18n config **/
@NgModule({
  providers   : [
    provideNzI18n(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:

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 { }