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,

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

/** switch ng-zorro-antd locales via LOCALE_ID **/
export const appConfig: ApplicationConfig = {
  providers: [
    // ...
    provideNzI18n(() => (inject(LOCALE_ID) === 'fr' ? fr_FR : 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:

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)]
};