--- Title: Schematics URL: https://ng.ant.design/docs/schematics/en --- Using a CLI helps initialize projects, generate template codes and reduce development time. > The`ng-zorro-antd` scaffolding is essentially based on [schematics](https://blog.angular.dev/schematics-an-introduction-dc1dfbc2a2b2). ## Initialize A Project Initialize a project with `ng-zorro-antd`. Run the command `ng add ng-zorro-antd` under your project directory, and follow the options to configure settings including whether you want to import i18n files and stylesheets, and load initial modules. NG-ZORRO CLI In the meantime, you can choose an existing project template while creating your project, and then develop the project on the basis of it. ### Command ```bash ng add ng-zorro-antd [options] ``` ## Component Generation There are template source codes under every component API show case, you may obtain these codes by expanding `Show Code`. ### Command ```bash ng g ng-zorro-antd:[schematic] [options] ``` For example, you can generate a login form with the follow command. ```bash ng g ng-zorro-antd:form-normal-login login ``` --- Title: Ant Design of Angular URL: https://ng.ant.design/docs/introduce/en --- An enterprise-class Angular UI component library based on Ant Design, all components are open source and free to use under MIT license.
Ant Design + Angular
## Features - An enterprise-class UI design language for Angular applications. - 70+ high-quality Angular components out of the box. - Written in TypeScript with complete defined types. - Support OnPush mode, high performance. - Powerful theme customization in every detail. - Internationalization support for dozens of languages. ## Environment Support - Modern browsers, [Browser support](https://angular.dev/reference/versions#browser-support) - Server-side Rendering - [Electron](https://www.electronjs.org/) | [Edge](https://godban.github.io/browsers-support-badges//)
Edge | [Firefox](https://godban.github.io/browsers-support-badges/)
Firefox | [Chrome](https://godban.github.io/browsers-support-badges/)
Chrome | [Safari](https://godban.github.io/browsers-support-badges/)
Safari | [Opera](https://godban.github.io/browsers-support-badges/)
Opera | [Electron](https://godban.github.io/browsers-support-badges/)
Electron | |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | ## Version [![npm package](https://img.shields.io/npm/v/ng-zorro-antd.svg?style=flat-square)](https://www.npmjs.org/package/ng-zorro-antd) ## Angular Support `ng-zorro-antd` keeps the same major version with `@angular/core`, now supports Angular `^20.0.0`. ## Design Specification `ng-zorro-antd` synchronizes design specification with [Ant Design](https://ant.design/docs/spec/introduce) on a regular basis, you can check the [log](https://github.com/NG-ZORRO/ng-zorro-antd/actions?query=workflow:"styles-sync") online. ## Installation **We recommend using `@angular/cli` to install**，it not only makes development easier，but also allow you to take advantage of the rich ecosystem of angular packages and tooling. ```bash $ ng new PROJECT_NAME $ cd PROJECT_NAME $ ng add ng-zorro-antd ``` > More information about `@angular/cli` [here](https://github.com/angular/angular-cli). You can also install `ng-zorro-antd` with npm or yarn ```bash $ npm install ng-zorro-antd ``` ## Companies using ng-zorro-antd - [Alibaba](https://www.alibaba.com/) - [Aliyun](https://www.aliyun.com/) - [ThoughtWorks](https://www.thoughtworks.com/) - [China Merchants Bank](https://english.cmbchina.com/) - [Ververica](https://www.ververica.com/) - [Apache Flink](https://flink.apache.org/) - [Apache Zeppelin](https://zeppelin.apache.org/) - [Apache Submarine](https://submarine.apache.org/) - [Apache Metron](https://metron.apache.org/) - [Process Automation Group](https://pag.company/) - [AISINOCO](https://www.aisino.com/) - [GongDao](https://www.gongdao.com/) - [UC Express](https://www.uce.cn/) - [Qingflow](https://qingflow.com/) - [DataGrand](https://datagrand.com/) - [ScentBird](https://www.scentbird.com/) - [Southern Institute of Technology](https://www.sit.ac.nz/) - [Hapify (Dynamic boilerplates tool)](https://hub.hapify.io/) > We list some users here, if your company or product uses ng-zorro-antd, let us know [here](https://github.com/NG-ZORRO/ng-zorro-antd/issues/1142)! ## Contributing Please read our [CONTRIBUTING.md](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md) first. If you'd like to help us improve ng-zorro-antd, just create a [Pull Request](https://github.com/NG-ZORRO/ng-zorro-antd/pulls). Feel free to report bugs and issues [here](https://ng.ant.design/issue-helper/#/en). > If you're new to posting issues, we ask that you read [*How To Ask Questions The Smart Way*](https://www.catb.org/~esr/faqs/smart-questions.html)(This guide does not provide actual support services for this project!) and [How to Ask a Question in Open Source Community](https://github.com/seajs/seajs/issues/545) and [How to Report Bugs Effectively](https://www.chiark.greenend.org.uk/~sgtatham/bugs.html) prior to posting. Well written bug reports help us help you! ## Need Help? For questions on how to use ng-zorro-antd, please post questions to [Stack Overflow](https://stackoverflow.com/questions/tagged/ng-zorro-antd) using the `ng-zorro-antd` tag. If you're not finding what you need on stackoverflow, you can find us on [Discussions · NG-ZORRO/ng-zorro-antd](https://github.com/NG-ZORRO/ng-zorro-antd/discussions) as well. As always, we encourage experienced users to help those who are not familiar with `ng-zorro-antd`! --- Title: Internationalization URL: https://ng.ant.design/docs/i18n/en --- 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`](https://date-fns.org/docs/I18n) library, see `How to use date-fns for date formatting`) below. ```ts /** 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](https://angular.dev/guide/i18n/add-package), ng-zorro-antd could keep the same localization with angular via [LOCALE_ID](https://angular.dev/api/core/LOCALE_ID) ```ts /** 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. ```ts 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 Name | Language | |--------------|-----------------------| | ar_EG | Arabic | | az_AZ | Azerbaijani | | bg_BG | Bulgarian | | bn_BD | Bangla (Bangladesh) | | by_BY | Belarusian | | ca_ES | Catalan | | cs_CZ | Czech | | da_DK | Danish | | de_DE | German | | el_GR | Greek | | en_AU | English (Australia) | | en_GB | English | | en_US | English (America) | | es_ES | Spanish | | et_EE | Estonian | | fa_IR | Persian | | fi_FI | Finnish | | fr_BE | French (Belgium) | | fr_CA | French (Canada) | | fr_FR | French (France) | | ga_IE | Irish Gaelic | | gl_ES | Galician (Spain) | | he_IL | Hebrew | | hi_IN | Hindi | | hr_HR | Croatian | | hu_HU | Hungarian | | hy_AM | Armenian | | id_ID | Indonesian | | is_IS | Icelandic | | it_IT | Italian | | ja_JP | Japanese | | ka_GE | Georgian | | kk_KZ | Kazakh | | km_KH | Khmer | | kmr_IQ | Kurmanji | | kn_IN | Kannada | | ko_KR | Korean | | ku_IQ | Kurdish | | lt_LT | Lithuanian | | lv_LV | Latvian | | mk_MK | Macedonian | | ml_IN | Malayalam (India) | | mn_MN | Mongolian | | ms_MY | Malay | | nb_NO | Norwegian | | ne_NP | Nepali | | nl_BE | Dutch (Belgium) | | nl_NL | Dutch | | pl_PL | Polish | | pt_BR | Portuguese (Brazil) | | pt_PT | Portuguese | | ro_RO | Romanian | | ru_RU | Russian | | sk_SK | Slovak | | sl_SI | Slovenian | | sr_RS | Serbian | | sv_SE | Swedish | | ta_IN | Tamil | | th_TH | Thai | | tr_TR | Turkish | | uk_UA | Ukrainian | | ur_PK | Urdu (Pakistan) | | vi_VN | Vietnamese | | zh_CN | Chinese (Simplified) | | zh_HK | Chinese (Traditional) | | zh_TW | Chinese (Traditional) | ## How to format a date using date-fns For date formatting, we use Angular's DatePipe ([syntax reference](https://angular.dev/api/common/DatePipe) 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](https://github.com/angular/angular/issues/25380)), the week number may not match expectations (related issues: [#2406]( https://github.com/NG-ZORRO/ng-zorro-antd/issues/2406), [#2819](https://github.com/NG-ZORRO/ng-zorro-antd/issues/2819) ). So we have a new `date-fns` method ([syntax reference](https://date-fns.org/docs/format#description)) 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): ```ts // 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: ```ts // 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: ```ts { /** 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](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`: ```ts 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) ] } ``` --- Title: Global Configuration URL: https://ng.ant.design/docs/global-config/en --- We add a **global configuration** support to many components. You can define the default behavior of these components through the global configuration, which reduces redundant codes that must be written in the templates (makes your codes concise). Moreover, it supports altering the global configuration at runtime. ## How to Use? In order to provide default configurations in certain components, please use `provideNzConfig` function. object providing implements interface `NzConfig`For example: ```typescript import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config'; const ngZorroConfig: NzConfig = { message: { nzTop: 120 }, notification: { nzTop: 240 } }; export const appConfig: ApplicationConfig = { providers: [ provideNzConfig(ngZorroConfig) ] } ``` These global configurations would be injected and stored in a service named `NzConfigService`. ### Provide Template Instances Some components accept `TemplateRef` as a default parameter. One of the easiest approaches is to invoke relevant functions from `NzConfigService` in the root component. ```typescript import { NzConfigService } from 'ng-zorro-antd/core/config'; export class AppComponent implements OnInit { private nzConfigService = inject(NzConfigService); @ViewChild('nzIndicatorTpl', { static: true }) nzIndicator!: TemplateRef; ngOnInit(): void { this.nzConfigService.set('spin', { nzIndicator: this.nzIndicator }); } } ``` However, this violates the separation of concerns principle and causes codes to be bloated in the `AppComponent`. To solve this, it is recommended to use a `FactoryProvider` instead of a `ValueProvider` (shown above) at the `NgModule` level. ```typescript // The module-level Component which contains template references. // Exporting is required for AOT compatibility @Component({ template: ` ` }) export class GlobalTemplatesComponent { @ViewChild('nzIndicatorTpl', { static: true }) nzIndicator!: TemplateRef; } // The Factory function const nzConfigFactory = (): NzConfig => { const environmentInjector = inject(EnvironmentInjector); const { nzIndicator } = createComponent(component, { environmentInjector }).instance; return { spin: { nzIndicator } }; }; export const appConfig: ApplicationConfig = { providers: [ { // The FactoryProvider provide: NZ_CONFIG, useFactory: nzConfigFactory } ] } ``` ## Overwrite inside Component Developers can use Dependency Injection to reset `NZ_CONFIG` within a particular component, which will not affect configurations outside it. ```typescript @Component({ providers: [ // reset local NzConfigService NzConfigService, { provide: NZ_CONFIG, useValue: { button: { nzSize: 'large' } } } ] }) ``` You can also use `useFactory` to combine the global configuration with the local configuration to take effect > Note: Change global configuration after component initialization won't affect local configuration ```typescript @Component({ providers: [ // reset local NzConfigService NzConfigService, { provide: NZ_CONFIG, useFactory: () => { // get global NzConfigService const globalConfig = inject(NzConfigService, { skipSelf: true }).getConfig(); const localConfig = { select: { nzBorderless: true } }; // merge local and global config const mergedConfig = { ...globalConfig, ...localConfig }; return mergedConfig; }, } ] }) ``` ## Dynamically Change Configurations You can alter the global configuration of a specific component through the `set` method of `NzConfigService`. For example: ```typescript import { NzConfigService } from 'ng-zorro-antd/core/config'; @Component({}) export class ChangeZorroConfigComponent { private nzConfigService = inject(NzConfigService); onChangeConfig() { this.nzConfigService.set('button', { nzSize: 'large' }) } } ``` All component instances is responsive to this configuration change (as long as they are not configured independently). ## Priority of Global Configurations For any property that supports global configuration, the sequence of priority is based on following: **Parameters passed to a component instance (in templates or through methods like `service.create` > global configuration provided by the injection token `NZ_CONFIG` > default value in ng-zorro-antd** For example, if you want to create a `NzNotification` component: 1. When you call `NzNotificationService.success`, you pass `{ nzDuration: 6000 }` as the third parameter 2. You provide `{ notification: { nzDuration: 5000 } }` through the injection token `NZ_CONFIG` 3. `ng-zorro-antd` has a default value of 4500 Consequently, this particular notification will be visible for 6000 milliseconds. ## Check all Available Globally Configurable Parameters The interface `NzConfig` provide complete information about all components and parameters that are globally configurable. You can also check each individual component's API for more details. --- Title: Getting Started URL: https://ng.ant.design/docs/getting-started/en --- Ant Design of Angular is dedicated to providing a **good development experience** for programmers. > The prerequisite of Ant Design Angular is a solid background knowledge of [Angular](https://angular.dev) and [JavaScript ES2015](http://babeljs.io/docs/learn-es2015/). ## Playground The following StackBlitz link demonstrates a basic use case, and it is recommended to fork this demo as a baseline while doing `Bug Report`. However, please do not use this demo as a scaffold in a real production environment. - [NG-ZORRO StackBlitz](https://stackblitz.com/edit/ng-zorro-antd-ivy) ## First Local Development There are several engineering requirements during development, including compiling, debugging, proxying, and packaging codes in TypeScript. We strongly encourage you to develop your project with the help of Angular official CLI `@angular/cli`. To be concise, a simple example is demonstrated below. ### Installation > Read the documentation of [Angular](https://angular.dev/cli) to explore more features. ```bash $ npm install -g @angular/cli # Or if you use yarn $ yarn global add @angular/cli ``` ### Create a New Project The following command allows `@angular/cli` to create a folder called `PROJECT-NAME` under the current directory, with necessary dependencies. ```bash $ ng new PROJECT-NAME ``` `@angular/cli` will run `npm install` or `yarn` after a project is created. You can run `npm install` or `yarn` by yourself if it fails. ### Install ng-zorro-antd After changing the directory to the newly created project, you can automatically run the following commands to initialize the project's configuration, including importing i18n files and stylesheets and loading initial modules. ```bash $ cd PROJECT-NAME $ ng add ng-zorro-antd ``` CLI `ng-zorro-antd` supports initializing configuration with schematics, more information is available in the [schematics](/docs/schematics/en) section. ### Development & Debugging Your project is now ready to run. After running the following command, a welcome page will be displayed in your browser. ```bash $ ng serve --port 0 --open ``` welcome ### Building & Deployment ```bash $ ng build --prod ``` Project files are built and generated in the `dist` directory by default. ## Customized Build You may use any existing scaffold tools in the Angular ecosystem in order to customize the building process. Please refer to [configure](https://github.com/NG-ZORRO/ng-zorro-antd/tree/master/integration) section if you encounter any issues. ### Install ng-zorro-antd ```bash $ npm install ng-zorro-antd --save # Or if you use yarn $ yarn add ng-zorro-antd ``` ### Import Styles #### Use all component styles This configuration contains all the styles of our components' library. If you want to use only certain components' styles, please refer to [Use only certain component styles](/docs/getting-started/en#use-only-certain-component-styles) section. Import the pre-built stylesheet in `angular.json` ```json { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] } ``` Import the pre-built stylesheet in `style.css` ```css @import "~ng-zorro-antd/ng-zorro-antd.min.css"; ``` Import the less stylesheet in `style.less` ```less @import "~ng-zorro-antd/ng-zorro-antd.less"; ``` #### Use only certain component styles > Please note that importing CSS files of several components may result in code redundancy due to the dependency relationships among some components' styles. It is necessary to import base styles (common to all components) before using certain components' styles. Import the pre-build styles in `style.css` ```css @import "~ng-zorro-antd/style/index.min.css"; /* Import base styles */ @import "~ng-zorro-antd/button/style/index.min.css"; /* Import one component's styles */ ``` Import the less styles in `style.less` ```less @import "~ng-zorro-antd/style/entry.less"; /* Import base styles */ @import "~ng-zorro-antd/button/style/entry.less"; /* Import one component's styles */ ``` #### Import component module Finally, you need to import the component modules that you want to use into your components. Taking the following `NzButtonModule` module as an example, first import the component module: ```ts import { Component } from '@angular/core'; import { NzButtonModule } from 'ng-zorro-antd/button'; @Component({ imports: [ NzButtonModule ] }) export class AppComponent {} ``` Then use the component inside the template: ```html ``` # Precautions - `ng-zorro-antd` already contains `@angular/cdk/overlay-prebuilt.css` overlay style, no additional import is required. ## Other - [I18n](/docs/i18n/en) - [Customize Theme](/docs/customize-theme/en) - [Use Icons](/components/icon/en) --- Title: FAQ URL: https://ng.ant.design/docs/faq/en ---

For more questions please search issues with FAQ tag.

### The bundle size of Angular and `ng-zorro-antd` The size hello-world project of angular after gzip is about `30KB`, the size of `ng-zorro-antd`'s doc site is about `287KB`. If you meet the bundle size issue, please make sure you use `ng build --prod` correctly to compile. If other third-party component kits other than `ng-zorro-antd` are imported, you could generate a sourcemap file using this command `ng build --prod --sourceMap=true` to check every dependency's bundled size. You can check [this link](https://angular.io/guide/deployment#inspect-the-bundles) for further instructions. ### Runtime performance of Angular and `ng-zorro-antd` Angular Vue and React have very similar benchmarks, which should not be a deciding factor, ref [benchmark](https://github.com/krausest/js-framework-benchmark)。All components of `ng-zorro-antd` are Angular Native and under `OnPush` mode, which will provide the best performance of Angular. ### Can I use ng-zorro-antd in other Angular version? `ng-zorro-antd` keeps the same major version with `@angular/core`, for example `ng-zorro-antd@8` supports `@angular/core@8`. In order to get the best performance, we recommend to use the latest version of angular, ref [update docs](https://angular.dev/update-guide). ### Can I use only some of the components of ng-zorro-antd? Yes, all components of `ng-zorro-antd` can be imported separately. ### Why ng-zorro-antd use less？ Can I use sass instead？ ng-zorro-antd follow the design spec of Ant Design, which could customize theme by less. `@angular/cli` support using both `less` and `sass` in the same project, they could work together. ### Can I use ng-zorro-antd with d3, jquery? All codes of ng-zorro-antd are native angular code, they won't have conflict with the other third libs. ### Can't Bind to since it isn't a known property of Please make sure you have export NG-ZORRO's feature modules in `ShareModule` if you have more than one module in your angular project, [ref](https://angular.dev/guide/ngmodules/sharing). ### Expression Changed After It Has Been Checked Error This [doc](https://blog.angularindepth.com/everything-you-need-to-know-about-the-expressionchangedafterithasbeencheckederror-error-e3fd9ce7dbb4) will help you. ### Can't bind to 'formGroup' since it isn't a known property of 'form' Don't forget to import `ReactiveFormsModule`, [ref](https://angular.dev/guide/forms/reactive-forms). ### The difference between `[nzValue]="data"` `nzValue="data"` and `nzValue="{{data}}"` `nzValue="data"` the component would get the `data` string, `nzValue="{{data}}"` equals to `[nzValue]="data.toString()"`. If you need pass `number` or `boolean` data, you should use `[nzValue]="data"`. ### Why my page content is not updated after I change the data? In order to get better performance, all NG-ZORRO's components are running under [OnPush](https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy) mode, this means any mutate to the `@Input()` data won't trigger change detection, please use immutable way to update array or object. ```typescript // add data this.dataSet = [ ...this.dataSet, { key : `${this.i}`, name : `Edward King ${this.i}`, age : '32', address: `London, Park Lane no. ${this.i}` }]; // remove data this.dataSet = this.dataSet.filter(d => d.key !== i); ``` Recommend using [immer](https://immerjs.github.io/immer/docs/introduction) for a better development experience. ### My Angular app is deadlock, what happened? Evaluation of a template expression should have no visible side effects. It would cause performance issue or deadlock if you go against the rule. The following component will print `I will run every time` every time. ```typescript @Component({ template: ` ` }) export class BugComponent { value(): string { console.log('I will run every time'); return 'value'; } } ``` ### How to make Angular applications faster? Read [https://web.dev/angular](https://web.dev/angular). ### Why some features are not supported? `ng-zorro-antd` is an implementation of Ant Design for Angular, which means only features supported by Ant Design would be implemented by `ng-zorro-antd`. ### Browser compatibility Please make sure your browser is [supported by Angular](https://github.com/angular/angular) and you have imported the [polyfill](https://angular.dev/reference/versions#polyfills) file correctly. And some components' usages are not supported by some browsers (i.e `flex` property). Please submit an issue if none of these is your case. ### Why my issue is closed? Issue is designed for maintainers and users to track the development process of the project, which means only bug reports and feature requests are accepted and usage questions are not. And to give priority to well-explained jobs, issues that are not written in the given format would be closed automatically by the bot right away. ### Where can I get help with Angular? You can checkout the official docs and Angular forums. A good trick is to search on Google using `[keywords] -angularjs` to prevent `angularjs`'s interference. For example, you can type in `angular ngmodel -angularjs` to learn more about `ngModel` without struggling in out-dated Angular.js things. --- Title: Direction URL: https://ng.ant.design/docs/direction/en --- Set the direction (LTR / RTL). ## Set the default direction Set the `dir` attribute on the document `body` or `html` tag. ```html ``` ## Set in the template Import the Angular CDK bidi module. ```typescript import { BidiModule } from '@angular/cdk/bidi'; ``` Set the direction for the application or its descendants in the template. ```html
``` ## Set in the service For example, the modal service. ```typescript class MyComponent { constructor(private modalService: NzModalService, private configService: NzConfigService) { } openModal(): void { this.modal.create({ nzDirection: 'rtl' }) } setDirWithConfig(): void { this.nzConfigService.set('modal', { nzDirection: 'rtl' }); } } ``` ### References - [Angular CDK Bidirectionality](https://material.angular.io/cdk/bidi/api) - [dir - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) --- Title: Theme Customization URL: https://ng.ant.design/docs/customize-theme/en --- Ant Design allows you to customize some basic design aspects in order to meet the needs of UI diversity from business and brand, including primary color, border radius, border color, etc. ![Example](https://zos.alipayobjects.com/rmsportal/zTFoszBtDODhXfLAazfSpYbSLSEeytoG.png) We are using [Less](https://lesscss.org/) as the development language for styling. A set of Less variables are defined for each design aspect that can be customized to your needs. > You can use the theme define file of react version in ng-zorro-antd too. ## Use Pre-defined Themes ### Customize the theme 1. Configure with schematics. Run `ng add ng-zorro-antd`, choose not to set up custom theme file and your `angular.json` will be configured automatically: ```json { "build": { "options": { "styles": [ "./node_modules/ng-zorro-antd/ng-zorro-antd.min.css" ] } } } ``` You can also add this config manually in `angular.json`. ### Official Themes Besides the default theme, we have provided 3 more official themes. Please try them out and give us feedbacks. - 🌑 Dark Theme - 📦 Compact Theme - ☁️ Aliyun Theme #### Method 1: Less Import `ng-zorro-antd.less`, `ng-zorro-antd.dark.less`, `ng-zorro-antd.compact.less` or `ng-zorro-antd.aliyun.less` in the style file and override style variables. ```less // Import the official default less style file @import "~ng-zorro-antd/ng-zorro-antd.less"; // Import the official dark less style file //@import "~ng-zorro-antd/ng-zorro-antd.dark.less"; // Import the official compact less style file //@import "~ng-zorro-antd/ng-zorro-antd.compact.less"; // Import the official Aliyun less style file //@import "~ng-zorro-antd/ng-zorro-antd.aliyun.less"; ``` #### Method 2: CSS If the project does not use Less, you can include `ng-zorro-antd.css`, `ng-zorro-antd.dark.css`, `ng-zorro-antd.compact.css` or `ng-zorro-antd.aliyun.css` in the CSS file or add to the `angular.json` config. CSS file: ```css @import "~ng-zorro-antd/ng-zorro-antd.css"; /*@import "~ng-zorro-antd/ng-zorro-antd.dark.css";*/ /*@import "~ng-zorro-antd/ng-zorro-antd.compact.css";*/ /*@import "~ng-zorro-antd/ng-zorro-antd.aliyun.css";*/ ``` In `angular.json`: ```json { "build": { "options": { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.css" ] } } } ``` ## Customize Pre-defined Theme ### Method 1: Override style variables in Less #### Import pre-defined theme file Import pre-defined theme file in the `src/styles.less` (or run `ng add ng-zorro-antd`, choose to set up custom theme automatically): ```less // Custom Theming for NG-ZORRO // For more information: https://ng.ant.design/docs/customize-theme/en @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; ... ``` #### Customize style variables After importing the theme file, override the values of theme style variables based on the project requirements. For example, the demo below illustrates how we can override the `ng-zorro-antd` default theme's `@primary-color` to `#f5222d`: ```less // -------- import official less file ----------- @import "../node_modules/ng-zorro-antd/ng-zorro-antd.less"; // -------- override less variables ----------- @primary-color: #f5222d; ``` ### Method 2: Override theme variables in webpack #### Override by pre-defined theme variables Using less-loader in webpack if needed: ```javascript const darkThemeVars = require('ng-zorro-antd/dark-theme'); const compactThemeVars = require('ng-zorro-antd/compact-theme'); module.exports = { module: { rules: [ { test : /\.less$/, loader: 'less-loader', options: { modifyVars: { 'hack': `true;@import "${require.resolve('ng-zorro-antd/style/color/colorPalette.less')}";`, ...darkThemeVars, ...compactThemeVars }, javascriptEnabled: true } } ] } }; ``` #### Override by customized style variables Angular CLI provide [custom-webpack-builder](https://www.npmjs.com/package/@angular-builders/custom-webpack), you can modify the less variable via adjusting the [less-loader](https://github.com/webpack-contrib/less-loader) options in webpack. 1. Import `ng-zorro-antd.less` in `angular.json` ```json { "styles": [ "node_modules/ng-zorro-antd/ng-zorro-antd.less" ] } ``` 2. Install `@angular-builders/custom-webpack` builder ```bash npm i -D @angular-builders/custom-webpack ``` 3. create `extra-webpack.config.js` ```javascript module.exports = { module: { rules: [ { test : /\.less$/, loader: 'less-loader', options: { modifyVars: { // modify theme variable 'primary-color': '#1DA57A', 'link-color': '#1DA57A', 'border-radius-base': '2px' }, javascriptEnabled: true } } ] } }; ``` 4. Customize builder in `angular.json` ```diff "architect": { "build": { - "builder": "@angular-devkit/build-angular:browser", + "builder": "@angular-builders/custom-webpack:browser", "options": { + "customWebpackConfig": { + "path": "./extra-webpack.config.js", + "mergeStrategies": { + "module.rules": "append" + }, + "replaceDuplicatePlugins": true + } }, }, "serve": { - "builder": "@angular-devkit/build-angular:dev-server", + "builder": "@angular-builders/custom-webpack:dev-server", } } ``` You can get more information about custom-webpack builder following the articles * [Angular Builder Document](https://www.npmjs.com/package/@angular-builders/custom-webpack) * [Angular CLI: Custom webpack Config](https://alligator.io/angular/custom-webpack-config/) * [Customize Webpack Configuration in Your Angular Application](https://netbasal.com/customize-webpack-configuration-in-your-angular-application-d09683f6bd22) All less variables can be viewed [here](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/components/style/themes/default.less) is a sample of theme define file. ## Theme Dynamic Switching We have prepared you a demonstration project illustrating how theme dynamic switching works, you can check it out [here](https://github.com/yangjunhan/nz-themes). ### Configure angular.json file 1. Style preprocessor option `stylePreprocessorOptions` Add path in a style preprocessor option called `stylePreprocessorOptions` in `angular.json`: ```json "stylePreprocessorOptions": { "includePaths": [ "src/path-to-mixin" ] }, ``` As such, this config allows you to import `.themeMixin(@rules)` definition file which is under `src/path-to-mixin` path anywhere in the project without the need of using relative path: ```css // A relative path works @import 'src/path-to-mixin/mixin'; // But now this works as well @import 'mixin'; ``` 2. `bundleName` and `inject` in styles If you intend to dynamically switch the pre-defined themes at runtime, you would need to configure every theme's bundling strategy for the bundler. For example, if your app has default and dark themes, the `styles` option of `angular.json` needs to be configured as below: ```json "styles": [ "src/styles.less", { "input": "src/styles/default.less", "bundleName": "default", "inject": false }, { "input": "src/styles/dark.less", "bundleName": "dark", "inject": false } ], ``` `bundleName` refers to the CSS bundle filename which is used for the href attribute in link tag for switching the pre-defined themes in the later section. `inject`'s default value is `true`, which the bundle is injected by default. For the purpose of theme dynamic switching, you need to set it to false to exclude the bundle from injection. ### Customize theme stylesheets In the context of multiple themes, every theme is supposed to have its own style entry file. For better project manageability, we also recommend you to put all relevant theme entry files under `src/styles` path. For a project with default and dark themes, your project styles can be in the following structure: 
  src/styles
  ├── dark.less
  ├── default.less
  └── themes
      ├── base.less
      ├── dark.less
      ├── default.less
      └── mixin.less
Stylesheets under `src/styles/` are entry files which are used to import the pre-defined official entry file as well as theme customization stylesheets under `src/styles/themes/`. For example, `src/styles/dark.less` entry file contains the following lines: ```less @import '../../node_modules/ng-zorro-antd/ng-zorro-antd'; @import "./themes/dark"; ``` Accordingly, `src/styles/themes/dark.less` is in charge of customizing dark theme: ```less @import (multiple) '../../../node_modules/ng-zorro-antd/src/style/themes/dark'; @import './base'; @layout-sider-background: @component-background; @layout-header-background: @component-background; ``` > The theme filename that you define can be identical to corresponding pre-defined theme filename. In such cases, `@import '';` has no effects. Less provides us a solution to this circumstance which uses `multiple` method to import `.less` files with identical filenames, i.e. `@import (multiple) '';`. Note that if there exists common style variables for all themes, you should create a `base.less` stylesheet and import it in every theme customization stylesheet: ```less // base.less customizes common style variables @margin-md: 17px; ... ``` ### Switch themes Switching themes involves two parts. First is switching the project component theme, and the other is switching the pre-defined theme. #### Switching component theme The default encapsulation policy of Angular for the template and CSS styles is `ViewEncapsulation.Emulated`, also known as shimmed CSS that emulates the native behavior. Based on different encapsulation policy, Angular will package component styles into a JS file in different ways. However, it is troublesome to define styles in the following format: ```less html { &.default { @import 'default'; // Component styles ... } &.dark { @import 'dark'; // Component styles ... } } ``` > Be noted that the configured path in the style preprocessor option `stylePreprocessorOptions` allows you to import file without the need of relative path. A better way to achieve this is to define a Mixin called `.themeMixin(@rules)` in the `mixin.less` file mentioned above: ```less .themeMixin(@rules) { html { &.default { @import './default.less'; @rules(); } &.dark { @import './dark.less'; @rules(); } } } ``` Then, wrap all the component styles in the `.themeMixin(@rules)`: ```less @import "mixin"; // Similarly, no need for relative path .themeMixin({ :host { // Component styles ... } }); ``` #### Switch pre-defined theme Loading a pre-defined theme file can be achieved by dynamically creating a `link` tag, append it on the DOM and remove previous tag. ```ts private loadCss(href: string, id: string): Promise { return new Promise((resolve, reject) => { const style = document.createElement('link'); style.rel = 'stylesheet'; style.href = href; style.id = id; style.onload = resolve; style.onerror = reject; document.head.append(style); }); } ``` `href` here refers to the path of the [bundle name](/docs/customize-theme/zh#Configure-angular-json-file), i.e. `bundleName`. #### Synchronize the style switching Project component styles will be packaged into a JS file which take effects immediately while switching themes via html `className`. On the other hand, it takes time to dynamically load the CSS theme file. If you attempt to perform two actions simultaneously, project styles will change immediately whereas styles of the pre-defined theme remain unchanged until the CSS theme file is fully loaded, resulting two themes mixing on the web page. As such, you must wrap the loading CSS process in a Promise and force the `className` switching to wait until the former completely finishes. ```ts private removeUnusedTheme(theme: ThemeType): void { document.documentElement.classList.remove(theme); const removedThemeStyle = document.getElementById(theme); if (removedThemeStyle) { document.head.removeChild(removedThemeStyle); } } loadTheme(firstLoad = true): Promise { const theme = this.currentTheme; if (firstLoad) { document.documentElement.classList.add(theme); } this.loadCss(`${theme}.css`, theme).then( e => { if (!firstLoad) { document.documentElement.classList.add(theme); } this.removeUnusedTheme(this.previousTheme); resolve(e); }, e => reject(e) ); } ``` Note: First-time loading of the user-defined default component theme must be performed immediately or there is a short period of time the app has no class of theme. --- Title: Dynamic Theme (Experimental) URL: https://ng.ant.design/docs/customize-theme-variable/en --- Except [less customize theme](/docs/customize-theme/en), We also provide CSS Variable version to enable dynamic theme. ## Caveats - This function depends on CSS Variables. Please check the [browser compatibility](https://caniuse.com/css-variables). - This function requires at least `ng-zorro-antd@13.2.x`. ## How to use ### Import antd.variable.min.css Replace your import style file with CSS Variable version: ```diff - @import "~ng-zorro-antd/ng-zorro-antd.min.css"; + @import "~ng-zorro-antd/ng-zorro-antd.variable.min.css"; ``` Note: You need remove `babel-plugin-import` for the dynamic theme. ### Static config In order to provide default configurations in certain components, please pass an object that implements the interface `NzConfig` through the injection token `NZ_CONFIG` in the root injector. For example: ```typescript import { NzConfig, provideNzConfig } from 'ng-zorro-antd/core/config'; const ngZorroConfig: NzConfig = { theme: { primaryColor: '#1890ff' } }; export const appConfig: ApplicationConfig = { providers: [ provideNzConfig(ngZorroConfig) ] } ``` These global configurations would be injected and stored in a service named `NzConfigService`. ### Dynamically Change Configurations You can alter the global configuration of CSS Variable through the `set` method of `NzConfigService`. For example: ```typescript import { NzConfigService } from 'ng-zorro-antd/core/config'; @Component({ selector: 'app-change-zorro-config' }) export class ChangeZorroConfigComponent { private nzConfigService = inject(NzConfigService); onChangeConfig() { this.nzConfigService.set('theme', { primaryColor: '#1890ff' }) } } ``` All component instances is responsive to this configuration change (as long as they are not configured independently). ## Conflict resolve CSS Variable use `--ant` prefix by default. When exist multiple antd style file in your project, you can modify prefix to fix it. ### Compile less Since prefix modified. Origin `antd.variable.css` should also be replaced: ```bash lessc --js --modify-var="ant-prefix=custom" antd/dist/antd.variable.less modified.css ``` ### Related changes In order to implement CSS Variable and maintain original usage compatibility, we added `@root-entry-name: xxx;` entry injection to the `ng-zorro-antd.xxx.less` file to support less dynamic loading of the corresponding less file. Under normal circumstances, you do not need to pay attention to this change. --- Title: How to Contribute URL: https://ng.ant.design/docs/contributing/en --- The following is a set of guidelines about making contributions to NG-ZORRO. Please spend several minutes in reading these guidelines before submitting an issue or pull request. ## Code of Conduct We have adopted a [Code of Conduct](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CODE_OF_CONDUCT.md) that we expect every contributor to adhere to. Please look through each section carefully so that you can understand what actions will and will not be allowed. ## Open Development All work on NG-ZORRO happens directly on [GitHub](https://github.com/NG-ZORRO/ng-zorro-antd). Both core team members and external contributors go through the same reviewing process in order to submit a pull request. ## Bugs We are using [GitHub Issues](https://github.com/NG-ZORRO/ng-zorro-antd/issues) for bug tracing. The best way to get your bug fixed is using our [issue helper](https://ng.ant.design/issue-helper/#/en) and provide a reproduction following this [template](https://stackblitz.com/edit/ng-zorro-antd-ivy). Before reporting a new bug, please make sure you have filtered existing issues, and read our [FAQ](docs/faq/en). ## Propose a Change If you intend to change a public API or introduce a new feature, we also recommend you to use our [issue helper](https://ng.ant.design/issue-helper/#/en) to submit a feature request issue. ## Your First Pull Request Please use the following resources for your first pull request: * [How to Contribute to Open Source](https://opensource.guide/how-to-contribute/) * [First Contributions](https://github.com/firstcontributions/first-contributions) To help you get your feet wet and get familiar with our contribution process, we have a list of [Good First Issue](https://github.com/NG-ZORRO/ng-zorro-antd/labels/good%20first%20issue) that contain either bugs that are relatively easy to be fixed or small features. These issues are considered as great starting points. If you decide to handle an issue, please be sure to check the comment thread in case someone else has already been working on it. If nobody is working on it at the moment, please leave a comment stating that you intend to work on it, preventing others from doing duplicate work. If somebody claimed an issue without any follow up for more than two weeks, it should be fine to take over it. Nevertheless, be sure to leave a comment under such issues. ## Contribute The core team is monitoring all pull requests. Your pull request will be either successfully merged, requested for a change, or closed with a reasonable explanation. **Before submitting a pull request**, please make sure to follow the steps below: 1. Run `npm install` in the repository root. 2. If you have fixed a bug or added a feature that should be tested, please add test cases! 3. Make sure the test suite passes (`npm run test`). 4. Make sure your code lints (`npm run lint`). 5. Make sure rebase your code to keep the history clean. 6. Make sure your commit message meet the requirements of [guidelines](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#-commit-message-guidelines) ## How to Submit a Pull Request 1. Fork the repository of `ng-zorro-antd`. The later steps must be done on the forked repository 2. On `master`: `git remote add upstream https://github.com/NG-ZORRO/ng-zorro-antd.git` 3. On `master`: `git pull upstream master` 4. On `master`: `git push origin master` 5. Checkout to the feature branch (for example, if the branch is called `docs-fix`): `git checkout docs-fix` 6. On `docs-fix` rebase on master: `git rebase origin/master` 7. On `docs-fix` resolve codes and commit: `git commit -a`, you need to follow the [commit message guidelines](https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/CONTRIBUTING.md#-commit-message-guidelines) 8. Then, push up: `git push` (might need `-f`, just be sure you understand force pushing before you do it) 9. Submit a Pull Request on the Github ## Development Workflow After cloning `ng-zorro-antd` and running `npm install` to install its dependencies, you can also run the following commands: * `npm start` runs NG-ZORRO website locally. * `npm run lint` checks the code style. * `npm test` runs the complete test suite. * `npm run test:watch [name]` run some test files and monitor changes. * `npm run build:lib` creates a build of `ng-zorro-antd` under `publish` directory. If you encounter problems while developing `ng-zorro-antd`, please refer to our [development guide](https://github.com/NG-ZORRO/ng-zorro-antd/wiki/Development-Guide) on the GitHub. --- Title: Animations Switch URL: https://ng.ant.design/docs/animations/en --- NG-ZORRO allows developers to turn off the animations. You can set animations' switch by adding corresponding directives or configurations, or use the global configuration to turn off all animations associated with it. ### Turn Off Globally Replace `BrowserAnimationsModule` with `NoopAnimationsModule` in the module. ```ts import { provideNoopAnimations } from '@angular/platform-browser/animations'; export const appConfig: ApplicationConfig = { providers: [ // ... provideNoopAnimations() ] } ``` ### Turn Off In Templates Import `NzNoAnimationModule`. ```ts import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; @Component({ imports: [ // ... NzNoAnimationModule ] }) ``` Add the `nzNoAnimation` directive to the component. ```html
    ``` ### Turn Off In Services Add the following configuration while invoking components' services. #### Modal, Drawer ```ts { // ... nzNoAnimation: true } ``` #### Notification, Message ```ts { // ... nzAnimate: false } ``` ### Turn Off The Wave Effect Some components use dynamic styles to support wave effects, so their styles are unable to be overridden directly. Instead, you can use `provideNzWave` or use `NoopAnimationsModule` to turn off the wave effects. ```ts import { provideNzWave } from 'ng-zorro-antd/core/wave'; export const appConfig: ApplicationConfig = { providers: [ provideNzWave({ disabled: true }) ] } ``` --- Title: WaterMark URL: https://ng.ant.design/components/water-mark/en --- ## When To Use - Use when the page needs to be watermarked to identify the copyright. - Suitable for preventing information theft. ## API ### nz-water-mark | Property | Description | Type | Default | |-------------|---------------------------------------------------------------------------------------------------|---------------------|----------------------------| | `nzContent` | Watermark text content | `string ｜ string[]` | - | | `nzWidth` | The width of the watermark, the default value of `nzContent` is its own width | `number` | 120 | | `nzHeight` | The height of the watermark, the default value of `nzContent` is its own height | `number` | 64 | | `nzRotate` | When the watermark is drawn, the rotation Angle, unit `°` | `number` | -22 | | `nzZIndex` | The z-index of the appended watermark element | `number` | 9 | | `nzImage` | Image source, it is recommended to export 2x or 3x image, high priority (support base64 format) | `string` | - | | `nzFont` | Text style | `FontType` | FontType | | `nzGap` | The spacing between watermarks | `[number, number]` | `[100, 100]` | | `nzOffset` | The offset of the watermark from the upper left corner of the container. The default is `nzGap/2` | `[number, number]` | `[nzGap[0]/2, nzGap[1]/2]` | ### FontType | Property | Description | Type | Default | |--------------|-------------|------------------------------------|-------------------| | `color` | font color | `string` | `rgba(0,0,0,.15)` | | `fontSize` | font size | `number` | 16 | | `fontWeight` | font weight | `normal ｜ light ｜ weight ｜ number` | normal | | `fontFamily` | font family | `string` | sans-serif | | `fontStyle` | font style | `none ｜ normal ｜ italic ｜ oblique` | normal | ## FAQ ### Handle abnormal image watermarks When using an image watermark and the image loads abnormally, you can add `nzContent` at the same time to prevent the watermark from becoming invalid. ```html
    ``` --- Title: Upload URL: https://ng.ant.design/components/upload/en --- ## When To Use Uploading is publishing information (web pages, text, pictures, video, etc.) to a remote server via a web page or upload tool. - When you need to upload one or more files. - When you need to show the process of uploading. - When you need to upload files by dragging and dropping. ## API > You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki) about how to implement server-side upload interface. ### nz-upload | Property | Description | Type | Default | |-----------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------|-----------------| | `[nzAccept]` | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | `string` | - | | `[nzAction]` | Required. Uploading URL | `string \| ((file: NzUploadFile) => string \| Observable)` | - | | `[nzDirectory]` | support uploading the whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | `boolean` | `false` | | `[nzBeforeUpload]` | Hook function, which will be executed before uploading. Uploading will be stopped with `false` or an Observable. **Warning： this function is not supported in IE9**. NOTICE: Must use `=>` to define the method. | `(file: NzUploadFile, fileList: NzUploadFile[]) => boolean \| Observable` | - | | `[nzCustomRequest]` | Override for the default XHR behavior allowing for additional customization and the ability to implement your own XMLHttpRequest. NOTICE: Must use `=>` to define the method. | `(item) => Subscription` | - | | `[nzData]` | Uploading params or function which can return uploading params. NOTICE: Must use `=>` to define the method. | `Object \| ((file: NzUploadFile) => Object \| Observable<{}>)` | - | | `[nzDisabled]` | disable upload button | `boolean` | `false` | | `[nzFileList]` | List of files, two-way data-binding | `NzUploadFile[]` | - | | `[nzLimit]` | limit single upload count when `nzMultiple` has opened. `0` unlimited | `number` | `0` | | `[nzSize]` | limit file size (KB). `0` unlimited | `number` | `0` | | `[nzFileType]` | limit file type, e.g: `image/png,image/jpeg,image/gif,image/bmp` | `string` | - | | `[nzFilter]` | Custom filter when choose file | `UploadFilter[]` | - | | `[nzHeaders]` | Set request headers, valid above IE10. NOTICE: Must use `=>` to define the method. | `Object \| ((file: NzUploadFile) => Object \| Observable<{}>)` | - | | `[nzListType]` | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | `'text' \| 'picture' \| 'picture-card'` | `'text'` | | `[nzMultiple]` | Whether to support selected multiple files. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | `boolean` | `false` | | `[nzName]` | The name of the uploading file | `string` | `'file'` | | `[nzShowUploadList]` | Whether to show the default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon` and `showDownloadIcon` individually | `boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean }` | `true` | | `[nzShowButton]` | Show upload button | `boolean` | `true` | | `[nzWithCredentials]` | ajax upload with cookie sent | `boolean` | `false` | | `[nzOpenFileDialogOnClick]` | click open file dialog | `boolean` | `true` | | `[nzPreview]` | A callback function will be executed when the file link or preview icon is clicked. NOTICE: Must use `=>` to define the method. | `(file: NzUploadFile) => void` | - | | `[nzPreviewFile]` | Customize preview file logic. NOTICE: Must use `=>` to define the method. | `(file: NzUploadFile) => Observable` | - | | `[nzPreviewIsImage]` | Customize the preview file is an image, generally used when the image URL is in a non-standard format. NOTICE: Must use `=>` to define the method. | `(file: NzUploadFile) => boolean` | - | | `[nzRemove]` | A callback function will be executed when the removing file button is clicked, remove event will be prevented when the return value is `false` or an Observable. NOTICE: Must use `=>` to define the method. | `(file: NzUploadFile) => boolean \| Observable` | - | | `(nzChange)` | A callback function, can be executed when uploading state is changing | `EventEmitter` | - | | `[nzDownload]` | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB. | `(file: NzUploadFile) => void` | Jump to new TAB | | `[nzTransformFile]` | Customize transform file before request | `(file: NzUploadFile) => NzUploadTransformFileType` | - | | `[nzIconRender]` | Custom show icon | `TemplateRef<{ $implicit: NzUploadFile }>` | - | | `[nzFileListRender]` | Custom file list | `TemplateRef<{ $implicit: NzUploadFile[] }>` | - | #### nzChange > The function will be called when uploading is in progress, completed or failed When uploading state changes, it returns: ```js { file: { /* ... */ }, fileList: [ /* ... */ ], event: { /* ... */ }, } ``` 1. `file` File object for the current operation. ```js { uid: 'uid', // unique identifier name: 'xx.png' // file name status: 'done', // options：uploading, done, error, removed response: '{"status": "success"}', // response from server linkProps: '{"download": "image"}', // additional html props of file link } ``` 2. `fileList` current list of files 3. `event` response from server, including uploading progress, supported by advanced browsers. #### nzCustomRequest Allows for advanced customization by overriding default behavior in `HttpClient`. Provide your own XMLHttpRequest calls to interface with custom backend processes or interact with AWS S3 service through the `aws-sdk` package. `nzCustomRequest` callback is passed an object with: - `onProgress: (event: { percent: number }): void` - `onError: (event: Error): void` - `onSuccess: (body: Object, xhr?: Object): void` - `data: Object` - `filename: String` - `file: File` - `withCredentials: Boolean` - `action: String` - `headers: Object` --- Title: Typography URL: https://ng.ant.design/components/typography/en --- ## When To Use - When need to display title or paragraph contents in Articles/Blogs/Notes. - When you need copyable/editable/ellipsis texts. ## API ### [nz-typography] | Property | Description | Type | Default | Global Config | | ------------------- | ------------------------------------------------------------------------------ | -------------------------------------------------------------------- | ------------------- | ------------- | | `[nzContent]` | Component content | `string` | - | | | `[nzCopyable]` | Can copy, require use `[nzContent]` | `boolean` | `false` | | | `[nzEditable]` | Editable, require use `[nzContent]` | `boolean` | `false` | | | `[nzCopyIcons]` | Custom copy icons | `[string \| TemplateRef, string \| TemplateRef]` | `['copy', 'check']` | ✅ | | `[nzCopyTooltips]` | Custom tooltips text, hide when it is `null` | `null \| [string \| TemplateRef, string \| TemplateRef]` | - | ✅ | | `[nzEditIcon]` | Custom edit icon | `string \| TemplateRef` | `'edit'` | ✅ | | `[nzEditTooltip]` | Custom tooltip text, hide when it is `null` | `null \| string \| TemplateRef` | - | ✅ | | `[nzEllipsis]` | Display ellipsis when overflow, require use `[nzContent]` when dynamic content | `boolean` | `false` | | | `[nzSuffix]` | The text suffix when used `nzEllipsis` | `string` | - | | | `[nzCopyText]` | Customize the copy text | `string` | - | | | `[nzDisabled]` | Disable content | `boolean` | `false` | | | `[nzExpandable]` | Expandable when ellipsis | `boolean` | `false` | | | `[nzEllipsisRows]` | Line number | `number` | `1` | ✅ | | `[nzType]` | Content type | `'secondary' \| 'warning' \| 'danger' \| 'success'` | - | | | `(nzContentChange)` | Trigger when user edit the content | `EventEmitter` | - | | | `(nzExpandChange)` | Trigger when user expanded the content | `EventEmitter` | - | | | `(nzOnEllipsis)` | Trigger when ellipsis status changed | `EventEmitter` | - | | --- Title: Tree View URL: https://ng.ant.design/components/tree-view/en --- ## When To Use More basic Tree component, allowing each of its parts to be defined in the template, and state to be managed manually. ## API ### nz-tree-view | Property | Description | Type | Default | |---------------------|----------------------------------------------------|------------------------------------------------------------------------------------------------------------|---------| | `[nzTreeControl]` | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - | | `[nzDataSource]` | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)<T> \| Observable \| T[] | - | | `[nzDirectoryTree]` | Whether nodes are displayed as directory style | `boolean` | `false` | | `[nzBlockNode]` | Whether tree nodes fill remaining horizontal space | `boolean` | `false` | ### nz-tree-virtual-scroll-view The virtual scroll tree view, which can be accessed from the [CdkVirtualScrollViewport](https://material.angular.io/cdk/scrolling/api#CdkVirtualScrollViewport) instance through the `virtualScrollViewport` member of the component instance. | Property | Description | Type | Default | |---------------------|--------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|-----------| | `[nzTreeControl]` | The tree controller | [TreeControl](https://material.angular.io/cdk/tree/api#TreeControl) | - | | `[nzDataSource]` | The data array to render | [DataSource](https://material.angular.io/cdk/tree/overview#data-source)<T> \| Observable \| T[] | - | | `[nzDirectoryTree]` | Whether nodes are displayed as directory style | `boolean` | `false` | | `[nzBlockNode]` | Whether tree nodes fill remaining horizontal space | `boolean` | `false` | | `[nzItemSize]` | The size of nodes in the tree (in pixels) | `number` | `28` | | `[nzMinBufferPx]` | The minimum amount of buffer rendered allowed outside the viewport (in pixels) | `number` | `28 * 5` | | `[nzMaxBufferPx]` | The amount of buffer required for rendering new nodes (in pixels) | `number` | `28 * 10` | ### [nzTreeNodeDef] Directive to define `nz-tree-node`. | Property | Description | Type | Default | |-----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------|---------| | `[nzTreeNodeDefWhen]` | A matching function which indicates whether inputted node should be used. It matches the very first node that makes this function return `true`. If no nodes that makes this function return `true`, the node which does not define this function would be matched instead. | `(index: number, nodeData: T) => boolean` | - | ### nz-tree-node The tree node container component, which needs to be defined by the `nzTreeNodeDef` directive. ### [nzTreeNodePadding] ```html ``` Show node indentation by adding `padding` **Best Performance**. ### nzTreeNodeIndentLine ```html ``` Show node indentation by adding indent lines. ### nz-tree-node-toggle A toggle which is used to expand / collapse the node. | Property | Description | Type | Default | |-------------------------------|-------------------------------------|-----------|---------| | `[nzTreeNodeToggleRecursive]` | Is it recursively expand / collapse | `boolean` | `false` | ### nz-tree-node-toggle[nzTreeNodeNoopToggle] A toggle that does no actions. This can be used for placeholders or displays icons. ### [nzTreeNodeToggleRotateIcon] Define an icon in the toggle, which it will automatically rotate depending on the collapse/expand state. ### [nzTreeNodeToggleActiveIcon] Define an icon in the toggle for an active style, which it can be used for the loading state. ### nz-tree-node-option Define the selectable feature of a node. | Property | Description | Type | Default | |----------------|--------------------------------|----------------------------|---------| | `[nzSelected]` | Whether the option is selected | `boolean` | `false` | | `[nzDisabled]` | Whether the option is disabled | `boolean` | `false` | | `(nzClick)` | Event on click | `EventEmitter` | - | ### nz-tree-node-checkbox Define the checkbox feature of a node. | Property | Description | Type | Default | |---------------------|---------------------------------------|----------------------------|---------| | `[nzChecked]` | Whether the checkbox is checked | `boolean` | `false` | | `[nzDisabled]` | Whether the checkbox is disabled | `boolean` | `false` | | `[nzIndeterminate]` | Whether the checkbox is indeterminate | `boolean` | `false` | | `(nzClick)` | Event on click | `EventEmitter` | - | ## Classes ### NzTreeFlatDataSource extends DataSource **Construction Parameters** | Name | Description | |-------------------------------------------|------------------------------------------------------------------| | `treeControl: FlatTreeControl` | The tree controller. | | `treeFlattener: NzTreeFlattener` | Flattener for convert nested nodes `T` into flattened nodes `F`. | | `initialData: T[] = []` | Initialized data. | **Methods** | Name | Description | |----------------------------------------------------------------|--------------------------------------------------------------| | `connect(collectionViewer: CollectionViewer): Observable` | Call from the TreeView component to listen for data updates. | | `disconnect(): void` | Call when TreeView component is destroyed. | | `setData(value: T[]): void` | Set the origin data | | `getData(): T[]` | Get the origin data | ### NzTreeFlattener Convert nested data with child nodes into node data with level information. **Construction Parameters** | Name | Description | |-------------------------------------------------------------------------|-------------------------------------------------------| | `transformFunction: (node: T, level: number) => F` | Receive a nested node and return a flattened node | | `getLevel: (node: F) => number` | Define the method to get the `level` property | | `isExpandable: (node: F) => boolean` | Methods for defining whether a node is expandable | | `getChildren: (node: T) => Observable \| T[] \| undefined \| null` | Define methods to get children nodes from nested node | **Methods** | Name | Description | |-------------------------------------------------------------------------|---------------------------------------------------| | `flattenNodes(structuredData: T[]): F[]` | Receive nested data and return flattened data | | `expandFlattenedNodes(nodes: F[], treeControl: TreeControl): F[]` | Get flattened node data based on expansion status | --- Title: TreeSelect URL: https://ng.ant.design/components/tree-select/en --- ## When To Use `TreeSelect` is similar to `Select`, but the values are provided in a tree like structure. Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on. ## API ### nz-tree-select | Property | Description | Type | Default | Global Config | |--------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|------------------------------------|---------------| | `[nzId]` | input id attribute inside the component | `string` | - | | `[nzAllowClear]` | Whether allow clear | `boolean` | `false` | | `[nzPlaceHolder]` | Placeholder of the select input | `string` | - | | `[nzPlacement]` | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft | | `[nzDisabled]` | Disabled or not | `boolean` | `false` | | `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` | | `[nzShowSearch]` | Whether to display a search input in the dropdown menu(valid only in the single mode) | `boolean` | `false` | ✅ | | `[nzNotFoundContent]` | Specify content to show when no result matches. | `'string' \| 'TemplateRef'` | - | | `[nzDropdownMatchSelectWidth]` | Determine whether the dropdown menu and the select input are the same width | `boolean` | `true` | ✅ | | `[nzDropdownStyle]` | To set the style of the dropdown menu | `object` | - | | `[nzDropdownClassName]` | classname of dropdown menu | `string` | - | | `[nzMultiple]` | Support multiple or not, will be `true` when enable `nzCheckable`. | `boolean` | `false` | | `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | | `[nzSize]` | To set the size of the select input | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | | `[nzCheckable]` | Whether to show checkbox on the treeNodes | `boolean` | `false` | | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` | | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | | `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | | | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` | | `[nzNodes]` | Data of the treeNodes | `NzTreeNodeOptions[]` | `[]` | | `[nzDefaultExpandAll]` | Whether to expand all treeNodes by default | `boolean` | `false` | | `[nzExpandedKeys]` | Default expanded treeNodes | `string[]` | - | | `[nzDisplayWith]` | How to display the selected node value in the trigger | `(node: NzTreeNode) => string` | `(node: NzTreeNode) => node.title` | | `[nzMaxTagCount]` | Max tag count to show | number | - | | `[nzMaxTagPlaceholder]` | Placeholder for not showing tags | TemplateRef<{ $implicit: NzTreeNode[] }> | - | | `[nzTreeTemplate]` | Custom Nodes | `TemplateRef<{ $implicit: NzTreeNode }>` | - | | `[nzVariant]` | Variants of TreeSelect | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | ✅ | | `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` | | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` | | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | | `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed | `EventEmitter` | - | #### Methods | Property | Description | Type | |--------------------------|---------------------------------------------------|----------------| | `getTreeNodes` | get all nodes(NzTreeNode) | `NzTreeNode[]` | | `getTreeNodeByKey` | get NzTreeNode with key | `NzTreeNode` | | `getCheckedNodeList` | get checked nodes(merged) | `NzTreeNode[]` | | `getSelectedNodeList` | get selected nodes | `NzTreeNode[]` | | `getHalfCheckedNodeList` | get half checked nodes | `NzTreeNode[]` | | `getExpandedNodeList` | get expanded nodes | `NzTreeNode[]` | | `getMatchedNodeList` | get matched nodes(if `nzSearchValue` is not null) | `NzTreeNode[]` | --- Title: Tree URL: https://ng.ant.design/components/tree/en --- ## When To Use Almost anything can be represented in a tree structure. Examples include directories, organization hierarchies, biological classifications, countries, etc. The `Tree` component is a way of representing the hierarchical relationship between these things. You can also expand, collapse, and select a treeNode within a `Tree`. ## API ### nz-tree > Tips: According to the current data structure design, you need to ensure that `nzData` is set first, otherwise other attributes will not take effect. After the asynchronous operation returns data, re-assign other attributes to trigger rendering(including `nzExpandAll` `nzExpandedKeys` `nzCheckedKeys` `nzSelectedKeys` `nzSearchValue`). Please refer to [#5152](https://github.com/NG-ZORRO/ng-zorro-antd/issues/5152) to track the optimization progress. | Property | Description | Type | Default | Global Config | |--------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------|---------|---------------| | `[nzData]` | Tree data (Reference NzTreeNode) | `NzTreeNodeOptions[] \| NzTreeNode[]` | `[]` | | `[nzBlockNode]` | Whether treeNode fill remaining horizontal space | `boolean` | `false` | ✅ | | `[nzCheckable]` | Add a checkbox before the treeNodes | `boolean` | `false` | | `[nzShowExpand]` | Show a Expand Icon before the treeNodes | `boolean` | `true` | | | `[nzShowLine]` | Shows a connecting line | `boolean` | `false` | | | `[nzExpandedIcon]` | Customize an expand icon | `TemplateRef<{ $implicit: NzTreeNode }>` | - | | `[nzShowIcon]` | Shows the icon before a TreeNode's title. There is no default style | `boolean` | `false` | ✅ | | `[nzAsyncData]` | Load data asynchronously (should be used with NzTreeNode.addChildren(...)) | `boolean` | `false` | | `[nzDraggable]` | Specifies whether this Tree is draggable (IE > 8) | `boolean` | `false` | | `[nzMultiple]` | Allows selecting multiple treeNodes | `boolean` | `false` | | `[nzHideUnMatched]` | Hide unmatched nodes while searching | `boolean` | `false` | ✅ | | `[nzCheckStrictly]` | Check treeNode precisely; parent treeNode and children treeNodes are not associated | `boolean` | `false` | | `[nzTreeTemplate]` | Custom Nodes | `TemplateRef<{ $implicit: NzTreeNode }>` | - | | `[nzExpandAll]` | Whether to expand all treeNodes | `boolean` | `false` | | `[nzExpandedKeys]` | Specify the keys of the default expanded treeNodes | `string[]` | `[]` | | `[nzCheckedKeys]` | Specifies the keys of the default checked treeNodes | `string[]` | `[]` | | `[nzSelectedKeys]` | Specifies the keys of the default selected treeNodes | `string[]` | `[]` | | `[nzSearchValue]` | Filter (highlight) treeNodes (see demo `Searchable`), two-way binding | `string` | `null` | | `[nzSearchFunc]` | Custom matching method, used with `nzSearchValue` | `(node: NzTreeNodeOptions) => boolean` | `null` | | `[nzBeforeDrop]` | Drop before the second check, allowing the user to decide whether to allow placement | `(confirm: NzFormatBeforeDropEvent) => Observable` | - | | `[nzVirtualHeight]` | The height of virtual scroll | `string` | `-` | | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `500` | | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `28` | | `(nzClick)` | Callback function for when the user clicks a treeNode | `EventEmitter` | - | | `(nzDblClick)` | Callback function for when the user double clicks a treeNode | `EventEmitter` | - | | `(nzContextMenu)` | Callback function for when the user right clicks a treeNode | `EventEmitter` | - | | `(nzCheckboxChange)` | Callback function for when user clicks the checkbox | `EventEmitter` | - | | `(nzExpandChange)` | Callback function for when a treeNode is expanded or collapsed | `EventEmitter` | - | | `(nzSearchValueChange)` | Callback function for when filter treeNodes(used with `nzSearchValue`) | `EventEmitter` | - | | `(nzOnDragStart)` | Callback function for when the onDragStart event occurs | `EventEmitter` | - | | `(nzOnDragEnter)` | Callback function for when the onDragEnter event occurs | `EventEmitter` | - | | `(nzOnDragOver)` | Callback function for when the onDragOver event occurs | `EventEmitter` | - | | `(nzOnDragLeave)` | Callback function for when the onDragLeave event occurs | `EventEmitter` | - | | `(nzOnDrop)` | Callback function for when the onDrop event occurs | `EventEmitter` | - | | `(nzOnDragEnd)` | Callback function for when the onDragEnd event occurs | `EventEmitter` | - | #### Methods | Property | Description | Type | |--------------------------|-------------------------------------------------|----------------| | `getTreeNodes` | get all nodes(NzTreeNode) | `NzTreeNode[]` | | `getTreeNodeByKey` | get NzTreeNode with key | `NzTreeNode` | | `getCheckedNodeList` | get checked nodes(merged) | `NzTreeNode[]` | | `getSelectedNodeList` | get selected nodes | `NzTreeNode[]` | | `getHalfCheckedNodeList` | get half checked nodes | `NzTreeNode[]` | | `getExpandedNodeList` | get expanded nodes | `NzTreeNode[]` | | `getMatchedNodeList` | get matched nodes(if nzSearchValue is not null) | `NzTreeNode[]` | #### NzTreeNodeOptions props | Property | Description | Type | Default | |-------------------|----------------------------------------------------------|-----------------------|---------| | `title` | Title | `string` | `'---'` | | `key` | Must be unique！ | `string` | `null` | | `icon` | icon before the treeNode，used with `nzShowIcon` | `string` | `null` | | `children` | TreeNode's children | `NzTreeNodeOptions[]` | `[]` | | `isLeaf` | Determines if this is a leaf node(can not be dropped to) | `boolean` | `false` | | `checked` | Set the treeNode be checked | `boolean` | `false` | | `selected` | Set the treeNode be selected | `boolean` | `false` | | `expanded` | Set the treeNode be expanded () | `boolean` | `false` | | `selectable` | Set whether the treeNode can be selected | `boolean` | `true` | | `disabled` | Disables the treeNode | `boolean` | `false` | | `disableCheckbox` | Disables the checkbox of the treeNode | `boolean` | `false` | | `[key: string]` | Indexable Types, can be used with NzTreeNode.origin | `any ` | - | #### NzFormatEmitEvent props | Property | Description | Type | Default | |-----------------|-----------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------|---------| | `eventName` | Event Name | enum: `click` `dblclick` `contextmenu` `check` `expand` `search` & `dragstart` `dragenter` `dragover` `dragleave` `drop` `dragend` | - | | `node ` | The current operation node (such as the target node to drop while dragging) | `NzTreeNode` | `null` | | `event` | MouseEvent or DragEvent | `'MouseEvent' \| 'DragEvent'` | `null` | | `dragNode?` | Current drag node (existing if dragged) | `NzTreeNode` | `null` | | `selectedKeys?` | Selected nodes list | `NzTreeNode[]` | `[]` | | `checkedKeys?` | Checked nodes list | `NzTreeNode[]` | `[]` | | `matchedKeys?` | Matched keys list while searching | `NzTreeNode[]` | `[]` | | `keys?` | All nodes' keys list related event(except drag events) | `string[]` | `[]` | | `nodes?` | All nodes related event(except drag events) | `NzTreeNode[]` | `[]` | #### NzFormatBeforeDropEvent props | Property | Description | Type | Default | |----------|----------------------------------------------------------------------------------------------------|--------------|---------| | dragNode | Current drag node (existing when dragged) | `NzTreeNode` | - | | node | The current operation node (such as the target node to drop while dragging) | `NzTreeNode` | - | | pos | position to drop(-1: before the target node, 0: inside the target node, 1: behind the target node) | `number` | - | #### NzTreeNode props | Property | Description | Type | Default | |---------------------|---------------------------------------------------------------------------------------------------------------------|----------------------------------------|-------------------------| | `title` | Title | `string` | NzTreeNodeOptions.title | | `key` | Key | `string` | NzTreeNodeOptions.key | | `level` | TreeNode's level relative to the root node | `number` | `number` | | `children` | Children | NzTreeNode[] | `[]` | | `origin` | treeNode's raw data of NzTreeNodeOptions(user provided to show more data) | NzTreeNodeOptions | - | | `getParentNode` | Get parentNode | function | `null` | | `isLeaf` | Whether treeNode is a Leaf Node | `boolean` | `false` | | `isExpanded` | Whether treeNode is expanded | `boolean` | `false` | | `isDisabled` | Whether treeNode is disabled | `boolean` | `false` | | `isDisableCheckbox` | Whether treeNode's checkbox can not be clicked | `boolean` | `false` | | `isSelectable` | Set whether the treeNode can be selected | `boolean` | `true` | | `isChecked` | Whether treeNode is checked | `boolean` | `false` | | `isHalfChecked` | Part of treeNode's children are checked | `boolean` | `false` | | `isSelected` | Whether treeNode is selected | `boolean` | `false` | | `isLoading` | Whether treeNode is loading(when nzAsyncData is true) | `boolean` | `false` | | `isMatched` | Whether treeNode's title contains nzSearchValue | `boolean` | `false` | | `setSyncChecked` | set isChecked value and sync other nodes' state of checkbox | function | - | | `getChildren` | Get all children | function | - | | `addChildren` | Add child nodes, receive NzTreeNode or NzTreeNodeOptions array, the second parameter is the inserted index position | (children: array, index?: number )=>{} | - | | `clearChildren` | Clear the treeNode's children | function | - | | `remove` | Clear current node(not root node) | function | - | ## Note - Please make sure `nzData` is set before the mentioned properties above: ```typescript // Demo this.nzExpandAll = false; const nodes = []; // source data this.nzData = [...nodes]; // Reset the above mentioned properties if you have used after setting of nzData this.nzExpandedKeys = [...this.nzExpandedKeys]; // this.nzExpandAll = true; this.nzCheckedKeys = [...this.nzCheckedKeys]; this.nzSelectedKeys = [...this.nzSelectedKeys]; ``` - `NzTreeNodeOptions` accepts your custom properties，use `NzTreeNode.origin` to get them. - If Tree Methods are used with ViewChild, should be used in ngAfterViewInit. - Setting `nzData` with NzTreeNodeOptions[] is better，if you set nzData with NzTreeNode[], it will be deprecated in next major version(8.x). --- Title: Transfer URL: https://ng.ant.design/components/transfer/en --- ## When To Use - It is a select control essentially which can be use for selecting multiple items. - Transfer can display more information for items and take up more space. Transfer the elements between two columns intuitively and efficiently. One or more elements can be selected from either column, one click on the proper `direction` button, and the transfer is done. The left column is considered the `source` and the right column is considered the `target`. As you can see in the API description, these names are reflected in. ## API ### nz-transfer | Property | Description | Type | Default | | ----------------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------ | --------------------- | | `[nzDataSource]` | Used for setting the data source. Except for the elements whose keys are `direction: 'right'` prop, or using `nzTargetKeys` prop. | `TransferItem[]` | `[]` | | `[nzDisabled]` | Whether the transfer is disabled | `boolean` | `false` | | `[nzTitles]` | A set of titles that are sorted from left to right. | `string[]` | `['', '']` | | `[nzOperations]` | A set of operations that are sorted from bottom to top. | `string[]` | `['', '']` | | `[nzListStyle]` | A custom CSS style used for rendering the transfer columns. equals to `ngStyle` | `object` | - | | `[nzItemUnit]` | single unit | `string` | `'item'` | | `[nzItemsUnit]` | multiple unit | `string` | `'items'` | | `[nzRenderList]` | Customize render list, please refer to the case. | `Array \| null>` | `[null, null]` | | `[nzRender]` | The function to generate the item shown on a column. please refer to the case. | `TemplateRef` | - | | `[nzFooter]` | A function used for rendering the footer. please refer to the case. | `TemplateRef` | - | | `[nzShowSelectAll]` | Whether to display the select all box | `boolean` | `true` | | `[nzShowSearch]` | Whether a search box is shown on each column. | `boolean` | `false` | | `[nzFilterOption]` | A function to determine whether an item should be shown in a search result list | `(inputValue: string, item: TransferItem) => boolean` | - | | `[nzSearchPlaceholder]` | The hint text of the search box. | `string` | `'Search here'` | | `[nzNotFoundContent]` | Text to display when a column is empty. | `string` | `'The list is empty'` | | `[nzCanMove]` | A function to determine what items should be moved (by default all checked items are moved). please refer to the case. | `(arg: TransferCanMove) => Observable` | - | | `[nzSelectedKeys]` | A set of keys of selected items. | `string[]` | - | | `[nzTargetKeys]` | A set of keys of elements that are listed on the right column. | `string[]` | - | | `[nzOneWay]` | Display as single direction style | `boolean` | `false` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `(nzChange)` | A callback function that is executed when the transfer between columns is complete. | `EventEmitter` | - | | `(nzSearchChange)` | A callback function which is executed when search field are changed | `EventEmitter` | - | | `(nzSelectChange)` | A callback function which is executed when selected items are changed. | `EventEmitter` | - | #### TransferItem | Property | Description | Type | Default | | --------- | ----------------------------------------------------------------------------------------------- | ------------------- | ------- | | title | Used to display and search keyword | `string` | - | | direction | Used for setting the data source. Except the elements whose keys are `direction: 'right'` prop. | `'left' \| 'right'` | - | | disabled | specifies whether the checkbox is disabled | `boolean` | `false` | | checked | specifies whether the checkbox is selected | `boolean` | `false` | #### TransferCanMove | Property | Description | Type | Default | | --------- | --------------------------------- | ------------------- | ------- | | direction | data direction | `'left' \| 'right'` | - | | list | Used for setting the source data. | `TransferItem[]` | `[]` | #### TransferChange | Property | Description | Type | Default | | -------- | --------------------------------- | ------------------- | ------- | | from | data direction | `'left' \| 'right'` | - | | to | data direction | `'left' \| 'right'` | - | | list | Used for setting the source data. | `TransferItem[]` | `[]` | #### TransferSearchChange | Property | Description | Type | Default | | --------- | -------------- | ------------------- | ------- | | direction | data direction | `'left' \| 'right'` | - | | value | Search keyword | `string` | - | #### nzRenderList | Property | Description | Type | Default | | ----------------- | ----------------------- | ------------------------------ | ------- | | `direction` | List render direction | `'left' \| 'right'` | - | | `disabled` | Disable list or not | `boolean` | - | | `items` | Filtered items | `TransferItem[]` | - | | `onItemSelect` | Select item | `(item: TransferItem) => void` | - | | `onItemSelectAll` | Select a group of items | `(selected: boolean) => void` | - | --- Title: Tooltip URL: https://ng.ant.design/components/tooltip/en --- ## When To Use - The Tooltip doesn't support complex text or operations. The tip is shown on mouse enter and is hidden on mouse leave. - To provide an explanation fo a `button/text/operation`. It's often used instead of the HTML `title` attribute to explain `button/text/operation`. ## API ### [nz-tooltip] | Property | Description | Type | Default | |---------------------------------|------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------| | `[nzTooltipArrowPointAtCenter]` | Arrow point at center of the origin | `boolean` | `false` | | `[nzTooltipTitle]` | The text shown in the tooltip | `string \| TemplateRef` | - | | `[nzTooltipTitleContext]` | The context of tooltip title | `object` | - | | `[nzTooltipTrigger]` | Tooltip trigger mode. If set to `null` it would not be triggered | `'click' \| 'focus' \| 'hover' \| null` | `'hover'` | | `[nzTooltipPlacement]` | The position of the tooltip relative to the target | `'top' \| 'left' \| 'right' \| 'bottom' \| 'topLeft' \| 'topRight' \| 'bottomLeft' \| 'bottomRight' \| 'leftTop' \| 'leftBottom' \| 'rightTop' \| 'rightBottom' \| Array` | `'top'` | | `[nzTooltipColor]` | The background color | `string` | - | | `[nzTooltipOrigin]` | Origin of the tooltip | `ElementRef` | - | | `[nzTooltipVisible]` | Show or hide tooltip | `boolean` | `false` | | `(nzTooltipVisibleChange)` | Callback of hide or show | `EventEmitter` | - | | `[nzTooltipMouseEnterDelay]` | Delay in seconds, before tooltip is shown on mouse enter | `number` | `0.15` | | `[nzTooltipMouseLeaveDelay]` | Delay in seconds, before tooltip is hidden on mouse leave | `number` | `0.1` | | `[nzTooltipOverlayClassName]` | Class name of the tooltip card | `string` | - | | `[nzTooltipOverlayStyle]` | Style of the tooltip card | `object` | - | ### Common API The following APIs are shared by `nz-tooltip`, `nz-popconfirm`, `nz-popover`. | Method | Description | |--------------------|-----------------| | `show()` | Show | | `hide()` | Hide | | `updatePosition()` | Update position | ## Exclude body element's scroll event need to refresh the position of CDK In using the tooltip (including popconfirm、popover), the body element's scroll event will update the position of the tooltip. It will never update the tooltip's position if the scroll event happens in a custom element. You can add the `cdkScrollable` directive to achieve the goal. Take notice that you need to import relative package `import { ScrollingModule } from '@angular/cdk/scrolling';`, for more information you can visit [scrolling/api](https://material.angular.io/cdk/scrolling/api). ## Note Please ensure that the node of `[nz-tooltip]` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events. --- Title: Timeline URL: https://ng.ant.design/components/timeline/en --- ## When To Use - When a series of information needs to be ordered by time (ascend or descend). - When you need a timeline to make a visual connection. ## API ```html step1 2015-09-01 step2 2015-09-01 step3 2015-09-01 step4 2015-09-01 ``` ### nz-timeline Timeline | Property | Description | Type | Default | | ---------------- | ----------------------------------------------------------------------------------- | ---------------------------------------------- | ---------------------------------------- | | `[nzPending]` | Set the last ghost node's existence or its content | `string\|boolean\|TemplateRef` | `false` | | `[nzPendingDot]` | Set the dot of the last ghost node when pending is true | `string\|TemplateRef` | `` | | `[nzReverse]` | Reverse nodes or not | `boolean` | `false` | | `[nzMode]` | By sending `alternate` the timeline will distribute the nodes to the left and right | `'left' \| 'alternate' \| 'right' \| 'custom'` | - | ### nz-timeline-item Node of timeline | Property | Description | Type | Default | | -------------- | --------------------------------------------------------------------------------------- | ----------------------------- | ------- | | `[nzColor]` | Set the circle's color to `'blue' \| 'red' \| 'green' \| 'gray'` or other custom colors | `string` | `blue` | | `[nzDot]` | Customize timeline dot | `string \| TemplateRef` | - | | `[nzPosition]` | Customize position, only works when `nzMode` is `custom` | `'left' \| 'right'` | - | | `[nzLabel]` | Set the label | `string \| TemplateRef` | - | --- Title: TimePicker URL: https://ng.ant.design/components/time-picker/en --- ## When To Use By clicking the input box, you can select a time from a popup panel. ## API ### nz-time-picker | Property | Description | Type | Default | Global Config | |---------------------------|----------------------------------------------------------------------------------------|----------------------------------------------------------|-------------------|---------------| | `[nzId]` | input id attribute inside the component | `string` | - | | `[ngModel]` | to set time | `Date` | - | | `[nzAddOn]` | called from timepicker panel to render some addon to its bottom | `TemplateRef` | - | | `[nzAllowEmpty]` | allow clearing text | `boolean` | `true` | ✅ | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | | `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | | `[nzClearText]` | clear tooltip of icon | `string` | `'clear'` | ✅ | | `[nzNowText]` | text of the Now button | `string` | `'Now'` | ✅ | | `[nzOkText]` | text of the Ok button | `string` | `'Ok'` | ✅ | | `[nzDefaultOpenValue]` | default open panel value if `[ngModel]` is null | `Date` | `new Date()` | | `[nzDisabled]` | determine whether the TimePicker is disabled | `boolean` | `false` | | `[nzDisabledHours]` | to specify the hours that cannot be selected | `() => number[]` | - | | `[nzDisabledMinutes]` | to specify the minutes that cannot be selected | `(hour: number) => number[]` | - | | `[nzDisabledSeconds]` | to specify the seconds that cannot be selected | `(hour: number, minute: number) => number[]` | - | | `[nzFormat]` | to set the time format | [DatePipe](https://angular.dev/api/common/DatePipe) | `"HH:mm:ss"` | ✅ | | `[nzHideDisabledOptions]` | hide the options that can not be selected | `boolean` | `false` | | `[nzHourStep]` | interval between hours in picker | `number` | `1` | ✅ | | `[nzMinuteStep]` | interval between minutes in picker | `number` | `1` | ✅ | | `[nzSecondStep]` | interval between seconds in picker | `number` | `1` | ✅ | | `[nzSize]` | width of time picker box | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | ~~`[nzBorderless]`~~ | ~~remove the border~~ | ~~`boolean`~~ | ~~`false`~~ | - | | `[nzVariant]` | Variants of TimePicker | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | ✅ | | `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - | | `[nzOpen]` | whether to popup panel, double binding | `boolean` | `false` | | `[nzPlaceHolder]` | display when there's no value | `string` | `"Select a time"` | | `[nzPopupClassName]` | className of panel | `string` | `''` | ✅ | | `[nzUse12Hours]` | display as 12 hours format, with default format `h:mm:ss a` | `boolean` | `false` | ✅ | | `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - | ✅ | | `(ngModelChange)` | a callback function, can be executed when the selected time is changing | `EventEmitter` | - | | `(nzOpenChange)` | a callback function which will be called while panel opening/closing | `EventEmitter` | - | #### Methods | Name | Description | | --------- | ------------ | | `blur()` | remove focus | | `focus()` | get focus | --- Title: Tag URL: https://ng.ant.design/components/tag/en --- ## When To Use - It can be used to tag by dimension or property. - When categorizing. ## API ### nz-tag | Property | Description | Type | Default | | ------------------- | --------------------------------------------------------------------------- | ----------------------------------------- | ----------- | | `[nzMode]` | Mode of tag | `'closeable' \| 'default' \| 'checkable'` | `'default'` | | `[nzChecked]` | Checked status of Tag, double binding, only works when `nzMode="checkable"` | `boolean` | `false` | | `[nzColor]` | Color of the Tag | `string` | - | | `[nzBordered]` | Whether has border style | `boolean` | `true` | | `(nzOnClose)` | Callback executed when tag is closed, only works when `nzMode="closable"` | `EventEmitter` | - | | `(nzCheckedChange)` | Checked status change call back, only works when `nzMode="checkable"` | `EventEmitter` | - | --- Title: Tabs URL: https://ng.ant.design/components/tabs/en --- ## When To Use Ant Design has 3 types of Tabs for different situations. - Card Tabs: for managing too many closeable views. - Normal Tabs: for functional aspects of a page. - [RadioButton](/components/radio/en/#components-radio-demo-radiobutton): for secondary tabs. ## API ### nz-tabs | Property | Description | Type | Default | Global Config | |------------------------------|-------------------------------------------------------------------------------------------|-----------------------------------------------------|------------------------------------|---------------| | `[nzSelectedIndex]` | Current tab's index | `number` | - | | `[nzAnimated]` | Whether to change tabs with animation. Only works while `nzTabPosition="top" \| "bottom"` | `boolean \| {inkBar:boolean, tabPane:boolean}` | `true`, `false` when `type="card"` | ✅ | | `[nzSize]` | preset tab bar size | `'large' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzTabBarExtraContent]` | Extra content in tab bar | `TemplateRef` | - | | `[nzTabBarStyle]` | Tab bar style object | `object` | - | | `[nzTabPosition]` | Position of tabs | `'top' \| 'right' \| 'bottom' \| 'left'` | `'top'` | | | `[nzType]` | Basic style of tabs | `'line' \| 'card' \| 'editable-card'` | `'line'` | ✅ | | `[nzTabBarGutter]` | The gap between tabs | `number` | - | ✅ | | `[nzHideAll]` | Whether hide all tabs | `boolean` | `false` | | `[nzLinkRouter]` | Link with Angular router. It supports child mode and query param mode | `boolean` | `false` | | | `[nzLinkExact]` | Use exact routing matching | `boolean` | `true` | | `[nzCanDeactivate]` | Determine if a tab can be deactivated | `NzTabsCanDeactivateFn` | - | | `[nzCentered]` | Centers tabs | `boolean` | `false` | | `[nzDestroyInactiveTabPane]` | Whether destroy inactive TabPane when change tab | `boolean` | `false` | | `(nzSelectedIndexChange)` | Current tab's index change callback | `EventEmitter` | - | | `(nzSelectChange)` | Current tab's change callback | `EventEmitter<{index: number,tab: NzTabComponent}>` | - | ### nz-tabs[nzType="editable-card"] | Property | Description | Type | Default | Global Config | |---------------|--------------------------------|-----------------------------------|---------|---------------| | `[nzHideAdd]` | Hide plus icon or not | `boolean` | `false` | | `[nzAddIcon]` | Add icon | `string \| TemplateRef` | - | | `(nzAdd)` | When add button clicked emit | `EventEmitter<>` | - | | `(nzClose)` | When close button clicked emit | `EventEmitter<{ index: number }>` | - | ### nz-tab | Property | Description | Type | Default | |-------------------|--------------------------------------------------------------------------|-------------------------------|---------| | `[nzTitle]` | Show text in tab's head | `string \| TemplateRef` | - | | `[nzForceRender]` | Forced render of content in tabs, not lazy render after clicking on tabs | `boolean` | `false` | | `[nzDisabled]` | tab disable | `boolean` | - | | `(nzClick)` | title click callback | `EventEmitter` | - | | `(nzContextmenu)` | title contextmenu callback | `EventEmitter` | - | | `(nzSelect)` | title select callback | `EventEmitter` | - | | `(nzDeselect)` | title deselect callback | `EventEmitter` | - | ### nz-tabs[nzType="editable-card"] > nz-tab | Property | Description | Type | Default | Global Config | |-----------------|------------------------|-------------------------------|---------|---------------| | `[nzClosable]` | Show close icon or not | `boolean` | `false` | | `[nzCloseIcon]` | Close icon | `string \| TemplateRef` | - | #### Template variable references of `nz-tab[nzTitle]` | Property | Description | Type | |-----------|-------------------------------------------------------------------------------------|-----------| | `visible` | Is the title in the visible area, will be rendered to the dropdown menu if `false`. | `boolean` | Use in `nz-tab[nzTitle]` ```html ... ... ``` Use in `*nzTabLink` ```html ... ``` ### [nz-tab] Tab contents can be lazy loaded by declaring the body in a `ng-template` with the `[nz-tab]` attribute. ### ng-template[nzTabLink] > a[nz-tab-link] Show a link in tab's head. Used in router link mode. ```html Link Default. ``` ### [nzTabBarExtraContent] > Note: `*nzTabBarExtraContent` has a higher priority than `nz-tabs[nzTabBarExtraContent]`. | Property | Description | Type | Default | Global Config | |--------------------------|---------------------------|--------------------|---------|---------------| | `[nzTabBarExtraContent]` | Position of extra content | `'start' \| 'end'` | `'end'` | --- Title: Table URL: https://ng.ant.design/components/table/en --- ## When To Use - To display a collection of structured data. - To sort, search, paginate and filter data. ## How To Use The Table component is both easy to use and highly customizable. ### Highly Customizable The `nz-table` can be used like [` W3C Standard `](https://www.w3.org/TR/html401/struct/tables.html). Developers can control every part of the table as they wish. ### Component Enhancements The component in `nz-table` such as `th`, `td`, `thead` etc. are enhanced. Developers can make the table sortable, filterable, with fixed header, perform server side rendering etc. easily with the provided api. ### Data Processing The data passed to `[nzData]` is exported with [Template Context](https://angular.dev/guide/templates/template-statements#statement-context) after processing (including paging, sorting and filtering). `*ngFor` can be used to render current page data in table. ```html ``` ## API ### nz-table | Property | Description | Type | Default | Global Config | | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------ | ------------- | | `[nzData]` | Data record array to be rendered | `T[]` | - | | `[nzFrontPagination]` | Whether to paginate data on client. Should be set to `false` if data is to be paginated on server side or if all the data is to be displayed at once in the table without any pagination | `boolean` | `true` | | `[nzTotal]` | Total data count. Should set when `nzFrontPagination` is `false` | `number` | - | | `[nzCustomColumn]` | Control the display and sorting of table columns, (after enabling `nzWidthConfig` and `[nzWidth]` of `th` will not take effect) | `NzCustomColumn[]` | - | | `[nzPageIndex]` | pageIndex , double binding | `number` | - | | `[nzPageSize]` | pageSize, double binding | `number` | - | | `[nzShowPagination]` | Whether to show pagination component at bottom of the table | `boolean` | `true` | | `[nzPaginationPosition]` | Specify the position of pagination | `'top' \| 'bottom' \| 'both'` | `bottom` | | `[nzPaginationType]` | Specify the size of pagination | `'default' \| 'small'` | `default` | | `[nzBordered]` | Whether to show all table borders | `boolean` | `false` | ✅ | | `[nzOuterBordered]` | Whether to show table outer borders | `boolean` | `false` | - | | `[nzWidthConfig]` | Set col width can not used with `[nzWidth]` of `th` | `string[]` | `[]` | | `[nzSize]` | Size of table | `'middle' \| 'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | Loading status of table | `boolean` | `false` | | `[nzLoadingIndicator]` | The loading indicator | `TemplateRef` | - | ✅ | | `[nzLoadingDelay]` | Specifies a delay in milliseconds for loading state (prevents flush) | `number` | `0` | | `[nzScroll]` | Whether table can be scrolled in x/y direction. `x` or `y` can be a string that indicates the width and height of table body | `object` | - | | `[nzTitle]` | Table title renderer | `string \| TemplateRef` | - | | `[nzFooter]` | Table footer renderer | `string \| TemplateRef` | - | | `[nzNoResult]` | Custom no result content | `string \| TemplateRef` | - | | `[nzPageSizeOptions]` | Specify the sizeChanger options | `number[]` | `[10, 20, 30, 40]` | | `[nzShowQuickJumper]` | Determine whether you can jump to pages directly | `boolean` | `false` | ✅ | | `[nzShowSizeChanger]` | Determine whether `nzPageSize` can be changed | `boolean` | `false` | ✅ | | `[nzShowTotal]` | To display Pagination total number and range, same as Pagination | `TemplateRef<{ $implicit: number, range: [ number, number ] }>` | - | | `[nzItemRender]` | To customize Pagination item, same as Pagination | `TemplateRef<{ $implicit: 'page' \| 'prev' \| 'next', page: number }>` | - | | `[nzHideOnSinglePage]` | Whether to hide pagination on single page | `boolean` | `false` | | `[nzSimple]` | Whether to use simple mode | `boolean` | - | ✅ | | `[nzTemplateMode]` | Template mode，no need to pass data to `nzData` | `boolean` | `false` | | `[nzVirtualItemSize]` | The size of the items in the list, same as [cdk itemSize](https://material.angular.io/cdk/scrolling/api) | `number` | `0` | | `[nzVirtualMaxBufferPx]` | The number of pixels worth of buffer to render for when rendering new items, same as [cdk maxBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `200` | | `[nzVirtualMinBufferPx]` | The minimum amount of buffer rendered beyond the viewport (in pixels),same as [cdk minBufferPx](https://material.angular.io/cdk/scrolling/api) | `number` | `100` | | `[nzVirtualForTrackBy]` | The TrackByFunction to be used for tracking changes. | `TrackByFunction` | - | | `[noDataVirtualHeight]` | Height of inner scroll when having no data, if nothing is passed the default value is used. | `string` | `'182px'` | | `(nzPageIndexChange)` | Callback when `pageIndex` changes | `EventEmitter` | - | | `(nzPageSizeChange)` | Callback when `pageSize` changes | `EventEmitter` | - | | `(nzCurrentPageDataChange)` | Callback when current pageData changes | `EventEmitter` | - | | `(nzCustomColumnChange)` | Callback when the table is reordered | `EventEmitter` | - | | `(nzQueryParams)` | Callback with params when working with server side pagination, sorting and filtering | `EventEmitter` | - | ### th Checkbox property | Property | Description | Type | Default | | ------------------- | --------------------------------------------------- | ----------------------- | ------- | | `[nzShowCheckbox]` | Whether `nz-checkbox` should be shown in the header | `boolean` | - | | `[nzDisabled]` | Whether the `nz-checkbox` is disabled | `boolean` | - | | `[nzIndeterminate]` | `nz-checkbox` indeterminate status | `boolean` | - | | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Callback when checked status changes | `EventEmitter` | - | Selection property | Property | Description | Type | Default | | ---------------------- | ------------------------------------------------------------------- | ---------------------------------------- | ------- | | `[nzShowRowSelection]` | Whether to show row selection options | `boolean` | - | | `[nzSelections]` | Selection options including `text` and `onSelect` callback function | `Array<{ text: string, onSelect: any }>` | - | Sort property | Property | Description | Type | Default | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ----------------------------- | | `[nzShowSort]` | Whether to display sorting | `boolean` | - | | `[nzSortFn]` | Sort function used to sort the data on client side (ref to Array.sort compareFunction). Should be set to `true` when using server side sorting | `NzTableSortFn \| boolean` | - | | `[nzSortOrder]` | Sort direction | `'ascend' \| 'descend' \| null` | - | | `[nzSortDirections]` | Supported sort order, could be `'ascend'`, `'descend'`, `null` | `Array<'ascend' \| 'descend' \| null>` | `['ascend', 'descend', null]` | ✅ | | `(nzSortOrderChange)` | Callback when sort direction changes | `EventEmitter<'ascend' \| 'descend' \| null>` | - | Filter property | Property | Description | Type | Default | | -------------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------- | ------- | | `[nzShowFilter]` | Whether to show filter | `boolean` | - | | `[nzFilterFn]` | Filter function used to filter the data on client side. Set to `true` when using server side filtering | `NzTableFilterFn \| boolean` | - | | `[nzFilters]` | Filter options, `text`, and `value` for callback, `byDefault` to enable filter by default | `Array<{ text: string; value: any; byDefault?: boolean }>` | - | | `[nzFilterMultiple]` | Whether multiple mode filtering is enabled | `boolean` | `true` | | `(nzFilterChange)` | Callback when filter `value` changes | `EventEmitter` | - | Style property | Property | Description | Type | Default | | ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------- | ------- | | `[nzWidth]` | Specify the column width (in pixels), can not used when grouping columns | `string` | - | | `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - | | `[nzCellControl]` | Set the position of the column, which is the value of the `value` field in the `NzCustomColumn` type | `string` | - | | `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` | | `[nzEllipsis]` | ellipsis cell content, not working with sorter and filters for now. Only work when nzTableLayout was `fixed` | `boolean` | `false` | Other | Property | Description | Type | Default | | --------------- | -------------------------------------------- | -------- | ------- | | `[nzColumnKey]` | column key, work with server sort and filter | `string` | - | ### td Checkbox property | Property | Description | Type | Default | | ------------------- | --------------------------------- | ----------------------- | ------- | | `[nzShowCheckbox]` | Whether add nz-checkbox | `boolean` | - | | `[nzDisabled]` | Whether disable checkbox | `boolean` | - | | `[nzIndeterminate]` | Indeterminate status | `boolean` | - | | `[nzLabel]` | ARIA label for the `nz-checkbox` | `string` | - | | `[nzChecked]` | Checked status, double binding | `boolean` | - | | `(nzCheckedChange)` | Checked status change callback | `EventEmitter` | - | | `[colSpan]` | how many columns the cell extends | `number` | `null` | | `[rowSpan]` | how many rows the cell extends | `number` | `null` | Expand property | Property | Description | Type | Default | | ------------------ | ------------------------------------- | ----------------------- | ------- | | `[nzShowExpand]` | Whether show expand icon | `boolean` | - | | `[nzExpand]` | Current expand status, double binding | `boolean` | - | | `[nzExpandIcon]` | Custom expand icon | `TemplateRef` | - | | `(nzExpandChange)` | Expand status change callback | `EventEmitter` | - | Style property | Property | Description | Type | Default | | ----------------- | ------------------------------------------------------------------------------------------------------------ | ------------------------------- | ------- | | `[nzLeft]` | Left pixels, used to fixed column to left, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzRight]` | Right pixels, used to fixed column to right, auto calc when set to `true` and disable fixed when `false` | `string \| boolean` | - | | `[nzAlign]` | Specify how content is aligned | `'left' \| 'right' \| 'center'` | - | | `[nzCellControl]` | Set the position of the column, which is the value of the `value` field in the `NzCustomColumn` type | `string` | - | | `[nzBreakWord]` | Whether insert line breaks within words | `boolean` | `false` | | `[nzEllipsis]` | ellipsis cell content, not working with sorter and filters for now. Only work when nzTableLayout was `fixed` | `boolean` | `false` | Other property | Property | Description | Type | Default | | ---------------- | ---------------------------------- | -------- | ------- | | `[nzIndentSize]` | Indent size in pixels of tree data | `number` | - | ### thead | Property | Description | Type | Default | | --------------------- | ------------------------------------------------------------ | --------------------------------------------------------------------- | ------- | | `(nzSortOrderChange)` | sort change callback，should used with `nzColumnKey` of `th` | `EventEmitter<{ key: string, value: 'descend' \| 'ascend' \| null }>` | - | ### tr | Property | Description | Type | Default | | ------------ | -------------------------------------------------------- | --------- | ------- | | `[nzExpand]` | Whether expand current row，used with `nzExpand` of `td` | `boolean` | - | ### tfoot | Property | Description | Type | Default | | ------------- | ----------------------------------- | ------------------------------ | ------- | | `[nzSummary]` | Summary content | `boolean` | - | | `[nzFixed]` | Fixed summary, used with `nzScroll` | `boolean \| 'top' \| 'bottom'` | `false` | ### nz-filter-trigger Customized filter panel | Property | Description | Type | Default | | ------------------- | ------------------------------------------------------------------------------------------------- | ------------------------- | ------- | | `[nzDropdownMenu]` | Dropdown menu | `NzDropdownMenuComponent` | - | | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - | | `[nzActive]` | whether the icon status is activated | `boolean` | `false` | | `[nzHasBackdrop]` | Whether or not attach a backdrop. | `boolean` | `false` | | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter` | - | ### [nz-virtual-scroll] virtual scroll directive work with `ng-template`, type: `TemplateRef<{ $implicit: T, index: number }>`. ## Note In order to get better performance, all NG-ZORRO's components are running under [OnPush](https://angular.dev/guide/components/advanced-configuration#changedetectionstrategy) mode, this means any mutate to the `@Input()` data won't trigger change detection, please use immutable way to update array or object. ```typescript // add data this.dataSet = [ ...this.dataSet, { key: `${this.i}`, name: `Edward King ${this.i}`, age: '32', address: `London, Park Lane no. ${this.i}` } ]; // remove data this.dataSet = this.dataSet.filter(d => d.key !== i); ``` Recommend using [immer](https://immerjs.github.io/immer/docs/introduction) for a better development experience. --- Title: Switch URL: https://ng.ant.design/components/switch/en --- ## When To Use - If you need to represent the switching between two states or on-off state. - The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation. ## API ### nz-switch | Property | Description | Type | Default | Global Config | | ----------------------- | ----------------------------------------------------------------------- | ----------------------------- | ----------- | ------------- | | `[nzId]` | button id attribute inside the component | `string` | - | | `[ngModel]` | determine whether the `nz-switch` is checked, double binding | `boolean` | `false` | | `[nzCheckedChildren]` | content to be shown when the state is checked | `string \| TemplateRef` | - | | `[nzUnCheckedChildren]` | content to be shown when the state is unchecked | `string \| TemplateRef` | - | | `[nzDisabled]` | Disable switch | `boolean` | `false` | | `[nzSize]` | the size of the `nz-switch`, options: `default` `small` | `'small' \| 'default'` | `'default'` | ✅ | | `[nzLoading]` | loading state of switch | `boolean` | `false` | | `[nzControl]` | determine whether fully control state by user | `boolean` | `false` | | `(ngModelChange)` | a callback function, can be executed when the checked state is changing | `EventEmitter` | - | #### Methods | Name | Description | | ------- | ------------ | | focus() | get focus | | blur() | remove focus | --- Title: Steps URL: https://ng.ant.design/components/steps/en --- ## When To Use When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier. ## API ```html ``` ### nz-steps The whole of the step bar. | Property | Description | Type | Default | |----------------------|---------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------|--------------| | `[nzType]` | type of steps, can be set to one of the following values: `default`, `navigation` | `'default' \| 'navigation'` | `default` | | `[nzCurrent]` | To set the current step, counting from 0. You can overwrite this state by using `nzStatus` of `nz-step` | `number` | `0` | | `[nzDirection]` | To specify the direction of the step bar, `horizontal` and `vertical` are currently supported | `'vertical' \| 'horizontal'` | `horizontal` | | `[nzLabelPlacement]` | Support vertical title and description | `'vertical' \| 'horizontal'` | `horizontal` | | `[nzProgressDot]` | Steps with progress dot style, customize the progress dot by setting it with TemplateRef | `boolean \| TemplateRef<{ $implicit: TemplateRef, status: string, index: number }>` | `false` | | `[nzSize]` | To specify the size of the step bar, `default` and `small` are currently supported | `'small' \| 'default'` | `'default'` | | `[nzStatus]` | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | `'wait' \| 'process' \| 'finish' \| 'error'` | `'process'` | | `[nzStartIndex]` | To specify the starting number | `number` | `0` | | `(nzIndexChange)` | Trigger event when step click | `number` | - | ### nz-step A single step in the step bar. | Property | Description | Type | Default | |-------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------|----------| | `[nzDescription]` | description of the step, optional property | `string \| TemplateRef` | - | | `[nzIcon]` | icon of the step, optional property | `string \| string[] \| Set \| { [klass: string]: any; }` \| `TemplateRef` | - | | `[nzStatus]` | to specify the status. It will be automatically set by `nzCurrent` of `nz-steps` if not configured. Optional values are: `wait` `process` `finish` `error` | `'wait' \| 'process' \| 'finish' \| 'error'` | `'wait'` | | `[nzTitle]` | title of the step | `string \| TemplateRef` | - | | `[nzSubtitle]` | subTitle of the step | `string \| TemplateRef` | - | | `[nzDisabled]` | disable click | `boolean` | `false` | | `[nzPercentage]` | Progress percentage of the step in `process` status (only works on basic Steps) | `number` | - | --- Title: Statistic URL: https://ng.ant.design/components/statistic/en --- ## When To Use - When want to highlight some data. - When want to display statistic data with description. ## API ### nz-statistic | Property | Description | Type | Default | | ------------------- | ---------------------------------- | ---------------------------------------------- | ------- | | `[nzPrefix]` | Prefix of Value | `string \| TemplateRef` | - | | `[nzSuffix]` | Suffix of Value | `string \| TemplateRef` | - | | `[nzTitle]` | Title | `string \| TemplateRef` | - | | `[nzValue]` | Value | `string \| number` | - | | `[nzValueStyle]` | Value CSS style | `Object` | - | | `[nzValueTemplate]` | Custom template to render a number | `TemplateRef<{ $implicit: string \| number }>` | - | | `[nzLoading]` | Loading status of Statistic | `boolean` | `false` | ### nz-countdown | Property | Description | Type | Default | | --------------------- | -------------------------------- | ------------------------------------ | ------------ | | `[nzFormat]` | Format string | `string` | `"HH:mm:ss"` | | `[nzPrefix]` | Prefix of Value | `string \| TemplateRef` | - | | `[nzSuffix]` | Suffix of Value | `string \| TemplateRef` | - | | `[nzTitle]` | Title | `string \| TemplateRef` | - | | `[nzValue]` | Target time in timestamp form | `string \| number` | - | | `[nzValueTemplate]` | Custom template to render a time | `TemplateRef<{ $implicit: number }>` | - | | `(nzCountdownFinish)` | Emit when countdown finishes | `void` | - | ### nzFormat | Token | Description | | ----- | ----------- | | `Y` | Year | | `M` | Month | | `D` | Date | | `H` | Hour | | `m` | Minute | | `s` | Second | | `S` | Millisecond | --- Title: Splitter URL: https://ng.ant.design/components/splitter/en --- ## When To Use The Splitter component can be used to separate areas horizontally or vertically. You can freely drag the splitter to adjust the size of each side, while also being able to specify its minimum and maximum width and height. ## API ### nz-splitter | Property | Description | Type | Default | |-------------------|---------------------------------|------------------------------|----------------| | `[nzLayout]` | Layout direction | `'horizontal' \| 'vertical'` | `'horizontal'` | | `[nzLazy]` | Lazy Mode | `boolean` | `false` | | `(nzResizeStart)` | Callback before dragging starts | `EventEmitter` | - | | `(nzResize)` | Panel size change callback | `EventEmitter` | - | | `(nzResizeEnd)` | Drag end callback | `EventEmitter` | - | ### nz-splitter-panel | Property | Description | Type | Default | |-------------------|-----------------------------------------------------------------|--------------------------------------------------|---------| | `[nzDefaultSize]` | Initial panel size support number for px or 'percent%' usage | `number \| string` | - | | `[nzMin]` | Minimum threshold support number for px or 'percent%' usage | `number \| string` | - | | `[nzMax]` | Maximum threshold support number for px or 'percent%' usage | `number \| string` | - | | `[nzSize]` | Controlled panel size support number for px or 'percent%' usage | `number \| string` | - | | `[nzCollapsible]` | Quick folding | `boolean \| { start?: boolean; end?: boolean }` | `false` | | `[nzResizable]` | Whether to enable drag and drop | `boolean` | `true` | --- Title: Spin URL: https://ng.ant.design/components/spin/en --- ## When To Use When part of the page is waiting for asynchronous data or during a rendering process, an appropriate loading animation can effectively alleviate users' inquietude. ## API ### nz-spin | Property | Description | Type | Default Value | Global Config | | --------------- | --------------------------------------------------------------------------------------- | --------------------------------- | ------------- | ------------- | | `[nzDelay]` | specifies a delay in milliseconds for loading state (prevent flush), unit: milliseconds | `number` | - | | `[nzIndicator]` | the spinning indicator | `TemplateRef` | - | ✅ | | `[nzSize]` | size of Spin | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzSpinning]` | whether Spin is spinning | `boolean` | `true` | | `[nzSimple]` | whether Spin has no children | `boolean` | `false` | | `[nzTip]` | customize description content when Spin has children | `string` | - | --- Title: Space URL: https://ng.ant.design/components/space/en --- ## When To Use - Avoid components clinging together and set a unified space. - Use `` when child form components are compactly connected and the border is collapsed. The difference with Flex component is: - Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns. - Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control. ## API ### nz-space | Property | Description | Type | Default | Global Config | | --------------- | ------------------------------------------- | -------------------------------------------- | ------------ | ------------- | | `[nzSize]` | The space size | `NzSpaceSize \| NzSpaceSize[]` | `small` | ✅ | | `[nzDirection]` | The space direction | `'vertical' \| 'horizontal'` | `horizontal` | | | `[nzAlign]` | Align items | `'start' \| 'end' \| 'baseline' \| 'center'` | - | | | `[nzWrap]` | Auto wrap line, when `horizontal` effective | `boolean` | `false` | | | `[nzSplit]` | Set split | `TemplateRef \| string` | - | | #### Interfaces ```ts type NzSpaceSize = 'small' | 'middle' | 'large' | number; ``` ### nz-space-compact Use `` when child form components are compactly connected and the border is collapsed. The supported components are： - Button - Cascader - DatePicker - Input - Select - TimePicker - TreeSelect | 参数 | 说明 | 类型 | 默认值 | 支持全局配置 | | --------------- | ------------------------------------------ | --------------------------------- | -------------- | ------------ | | `[nzBlock]` | Option to fit width to its parent\'s width | `boolean` | `false` | | | `[nzDirection]` | Set direction of layout | `'vertical' \| 'horizontal'` | `'horizontal'` | | | `[nzSize]` | Set child component size | `'large' \| 'default' \| 'small'` | `'default'` | | --- Title: Slider URL: https://ng.ant.design/components/slider/en --- ## When To Use To input a value in a range. ## API ### nz-slider | Property | Description | Type | Default | | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ | ---------------------------------------------------------------------------- | | `[nzDisabled]` | If true, the slider will not be interactable. | `boolean` | `false` | | `[nzDots]` | Whether the thumb can drag over tick only. | `boolean` | `false` | | `[nzIncluded]` | Make effect when `marks` not null，`true` means containment and `false` means coordinative | `boolean` | `true` | | `[nzMarks]` | Tick mark of Slider, type of key must be `number`, and must in closed interval `[min, max]` ，each mark can declare its own style. | `object` | { number: string/HTML } or { number: { style: object, label: string/HTML } } | | `[nzMax]` | The maximum value the slider can slide to | `number` | `100` | | `[nzMin]` | The minimum value the slider can slide to. | `number` | `0` | | `[nzRange]` | dual thumb mode | `boolean` | `false` | | `[nzStep]` | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | `number \| null` | `1` | | `[nzTipFormatter]` | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | `(value: number) => string \| TemplateRef` | - | | `[ngModel]` | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | `number \| number[]` | - | | `[nzVertical]` | If true, the slider will be vertical. | `boolean` | `false` | | `[nzReverse]` | Reverse the component | `boolean` | `false` | | `[nzTooltipVisible]` | When set to `always` tooltips are always displayed. When set to `never` they are never displayed | `'default' \| 'always' \| 'never'` | `default` | | `[nzTooltipPlacement]` | Set the default placement of Tooltip | `string` | | | `(nzOnAfterChange)` | Fire when `onmouseup` is fired. | `EventEmitter` | - | | `(ngModelChange)` | Callback function that is fired when the user changes the slider's value. | `EventEmitter` | - | --- Title: Skeleton URL: https://ng.ant.design/components/skeleton/en --- ## When To Use - When resource needs long time loading, like low network speed. - The component contains information, such as a List or Card. - Only works when loading data for the first time. - Could be replaced by Spin in any situation but can provide a better user experience. ## API ### nz-skeleton | Property | Description | Type | Default | | --------------- | --------------------------------------------------- | -------------------------------- | ------- | | `[nzActive]` | Show animation effect | `boolean` | `false` | | `[nzAvatar]` | Show avatar placeholder | `boolean \| NzSkeletonAvatar` | `false` | | `[nzLoading]` | Display the skeleton when `true` | `boolean` | - | | `[nzParagraph]` | Show the paragraph placeholder | `boolean \| NzSkeletonParagraph` | `true` | | `[nzTitle]` | Show the title placeholder | `boolean \| NzSkeletonTitle` | `true` | | `[nzRound]` | Show the paragraph and the title radius when `true` | `boolean` | `false` | ### NzSkeletonAvatar | Property | Description | Type | Default | | -------- | -------------------- | ------------------------------------------- | ------- | | `size` | Set the avatar size | `number \| 'large' \| 'small' \| 'default'` | - | | `shape` | Set the avatar shape | `'circle' \| 'square'` | - | ### NzSkeletonTitle | Property | Description | Type | Default | | -------- | ------------------- | ------------------ | ------- | | `width` | Set the title width | `number \| string` | - | ### NzSkeletonParagraph | Property | Description | Type | Default | | -------- | -------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------- | ------- | | `rows` | Set the row count of the paragraph | `number` | - | | `width` | Set the width of the paragraph. When width is an Array, it can set the width of each row. Otherwise, only set the last row width | `number \| string \| Array` | - | ### nz-skeleton-element [nzType="button"] | Property | Description | Type | Default | | ------------ | --------------------- | ---------------------------------------------- | ----------- | | `[nzActive]` | Show animation effect | `boolean` | `false` | | `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzShape]` | Set the shape | `'square' \| 'circle' \| 'round' \| 'default'` | `'default'` | ### nz-skeleton-element [nzType="avatar"] | Property | Description | Type | Default | | ------------ | --------------------- | ------------------------------------------- | ----------- | | `[nzActive]` | Show animation effect | `boolean` | `false` | | `[nzSize]` | Set the size | `number \| 'large' \| 'small' \| 'default'` | `'default'` | | `[nzShape]` | Set the shape | `'circle' \| 'square'` | `'square'` | ### nz-skeleton-element [nzType="input"] | Property | Description | Type | Default | | ------------ | --------------------- | --------------------------------- | ----------- | | `[nzActive]` | Show animation effect | `boolean` | `false` | | `[nzSize]` | Set the size | `'large' \| 'small' \| 'default'` | `'default'` | ### nz-skeleton-element [nzType="image"] | Property | Description | Type | Default | | ------------ | --------------------- | --------- | ------- | | `[nzActive]` | Show animation effect | `boolean` | `false` | --- Title: Select URL: https://ng.ant.design/components/select/en --- ## When To Use - A dropdown menu for displaying choices - an elegant alternative to the native ` ``` ### nz-mention | Property | Description | Type | Default | | ----------------------- | ----------------------------------------------------------------------------------------- | ---------------------------------------------- | -------------------------------- | | `[nzMentionTrigger]` | Trigger element **(required)** | `HTMLTextAreaElement \| HTMLInputElement` | - | | `[nzMentionSuggestion]` | Customize the suggestion template | `TemplateRef` | - | | `[nzLoading]` | Loading mode | `boolean` | `false` | | `[nzNotFoundContent]` | Suggestion when suggestions empty | `string` | `'无匹配结果，轻敲空格完成输入'` | | `[nzPlacement]` | The position of the suggestion relative to the target, which can be one of top and bottom | `'button' \| 'top'` | `'bottom'` | | `[nzPrefix]` | Character which will trigger Mention to show mention list | `string \| string[]` | `'@'` | | `[nzSuggestions]` | Suggestion content | `any[]` | `[]` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `[nzValueWith]` | Function that maps an suggestion's value | `(any) => string \| (value: string) => string` | | `(nzOnSelect)` | Callback function called when select from suggestions | `EventEmitter` | - | | `(nzOnSearchChange)` | Callback function called when search content changes | `EventEmitter` | - | #### Methods | Name | Description | | ----------- | ------------------------------------------------------- | | getMentions | Get the mentions array in the `input[nzMentionTrigger]` | ### nzMentionTrigger Trigger element ```html ``` ```html ``` ### nzMentionSuggestion Customize the suggestion template ```html {{ item.label }} - {{ item.value }} ``` ### MentionOnSearchTypes | Property | Description | Type | Default | | -------- | -------------- | -------- | ------- | | value | Search keyword | `string` | - | | prefix | prefix | `string` | - | --- Title: List URL: https://ng.ant.design/components/list/en --- ## When To Use A list can be used to display content related to a single subject. The content can consist of multiple elements of varying type and size. ## API ### nz-list | Property | Description | Type | Default | | ---------------- | --------------------------------------------------------------------------------------------------------------------- | --------------------------------- | -------------- | | `[nzBordered]` | Toggles rendering of the border around the list | `boolean` | `false` | | `[nzFooter]` | List footer renderer | `string \| TemplateRef` | - | | `[nzHeader]` | List header renderer | `string \| TemplateRef` | - | | `[nzItemLayout]` | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | `'vertical' \| 'horizontal'` | `'horizontal'` | | `[nzLoading]` | Shows a loading indicator while the contents of the list are being fetched | `boolean` | `false` | | `[nzSize]` | Size of list | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzSplit]` | Toggles rendering of the split under the list item | `boolean` | `true` | ### nz-list-empty Empty content component for the list. | Property | Description | Type | Default | | -------------- | ------------- | ----------------------------- | ------- | | `[nzNoResult]` | Empty content | `string \| TemplateRef` | - | ### nz-list[nzGrid] Use grid layout for the list. ### nz-list-header Header component for the list. ### nz-list-footer Footer component for the list. ### nz-list-pagination Pagination component for the list. ### nz-list-load-more Load more component for the list. --- ### nz-list-item | Property | Description | Type | Default | | ------------ | ---------------------------------------- | --------- | ------- | | `[nzNoFlex]` | Whether it's not `flex` layout rendering | `boolean` | `false` | #### ul[nz-list-item-actions] Actions container component for the list items. #### nz-list-item-action Action component for the list items. #### nz-list-item-extra Extra content for the list items. --- ### nz-list-item-meta | Property | Description | Type | Default | | ----------------- | ---------------------------- | ----------------------------- | ------- | | `[nzAvatar]` | The avatar of list item | `string \| TemplateRef` | - | | `[nzDescription]` | The description of list item | `string \| TemplateRef` | - | | `[nzTitle]` | The title of list item | `string \| TemplateRef` | - | #### nz-list-item-meta-title Title component for the list items meta part. #### nz-list-item-meta-description Description component for the list items meta part. #### nz-list-item-meta-avatar Avatar component for the list items meta part. | Property | Description | Type | Default | Global Config | | --------- | -------------------------------------------- | -------- | ------- | ------------- | | `[nzSrc]` | The address of the image for an image avatar | `string` | - | --- Title: Layout URL: https://ng.ant.design/components/layout/en --- ## Specification ### Size The first level navigation is inclined left near a logo, and the secondary menu is inclined right. - Top Navigation (almost systems): the height of the first level navigation `64px`, the second level navigation `48px`. - Top Navigation(contents page): the height of the first level navigation `80px`, the second level navigation `56px`. - Calculation formula of a top navigation: `48+8n`. - Calculation formula of an aside navigation: `200+8n`. ### Interaction rules - The first level navigation and the last level navigation should be distinguishable by visualization; - The current item should have the highest priority of visualization; - When the current navigation item is collapsed, the style of the current navigation item will be applied to its parent level; - The left side navigation bar has support for both the accordion and expanding styles, you can choose the one that fits your case best. ## Visualization rules Style of a navigation should conform to its level. - **Emphasis by colorblock** When background color is a deep color, you can use this pattern for the parent level navigation item of current page. - **The highlight match stick** When background color is a light color, you can use this pattern for the current page navigation item, we recommend using it for the last item of the navigation path. - **Highlighted font** From the visualization aspect, highlighted font is stronger than colorblock, this pattern is often used for the parent level of the current item. - **Enlarge the size of the font** `12px`、`14px` is a standard font size of navigations，`14px` is used for the first and the second level of the navigation. You can choose an appropriate font size in terms of the level of your navigation. ## Component Overview - `nz-layout`: The layout wrapper, in which `nz-header` `nz-sider` `nz-content` `nz-footer` or `nz-layout` itself can be nested, and can be placed in any parent container. - `nz-header`: The top layout with default style, in which any element can be nested, and must be placed in `nz-layout`. - `nz-sider`: The sidebar with default style and basic functions, in which any element can be nested, and must be placed in `nz-layout`. - `nz-content`: The content layout with default style, in which any element can be nested, and must be placed in `nz-layout`. - `nz-footer`: The bottom layout with default style, in which any element can be nested, and must be placed in `nz-layout`. > Based on `flex layout`, please pay attention to the [compatibility](http://caniuse.com/#search=flex). ## API ```html header left sidebar main content right sidebar footer ``` ### nz-sider The sidebar. | Property | Description | Type | Default | |-----------------------|-----------------------------------------------------------------------------------|-------------------------------------------------|---------| | `[nzBreakpoint]` | breakpoints of the responsive layout | `'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'xxl'` | - | | `[nzCollapsedWidth]` | width of the collapsed sidebar, by setting to `0` a special `trigger` will appear | `number` | `64` | | `[nzCollapsible]` | whether can be collapsed | `boolean` | `false` | | `[nzCollapsed]` | the collapsed status can be double binding | `boolean` | `false` | | `[nzReverseArrow]` | reverse direction of arrow, for a sider that expands from the right | `boolean` | `false` | | `[nzTrigger]` | specify the customized `trigger`, set to `null` to hide the `trigger` | `string \| TemplateRef` | - | | `[nzZeroTrigger]` | specify the customized trigger when `nzCollapsedWidth` setting to `0` | `TemplateRef` | - | | `[nzWidth]` | width of the sidebar | `number \| string` | `200` | | `[nzTheme]` | color theme of the sidebar | `'light' \| 'dark'` | `dark` | | `(nzCollapsedChange)` | the callback function | `EventEmitter` | - | #### breakpoint width ```js { xs: '575px', sm: '576px', md: '768px', lg: '992px', xl: '1200px', xxl: '1600px' } ``` --- Title: InputNumberLegacy URL: https://ng.ant.design/components/input-number-legacy/en --- > ⚠️ `InputNumberLegacy` has been deprecated in `v19.0.0`, and will be removed in `v21.0.0`, please use the new version of `InputNumber` component. ## When To Use When a numeric value needs to be provided. ## API ### nz-input-number | property | description | type | default | | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | | `[ngModel]` | current value, double binding | `number \| string` \| `string` | - | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | | `[nzDisabled]` | disable the input | `boolean` | `false` | | `[nzReadOnly]` | If readonly the input | `boolean` | `false` | | `[nzMax]` | max value | `number` | `Infinity` | | `[nzMin]` | min value | `number` | `-Infinity` | | `[nzFormatter]` | Specifies the format of the value presented | `(value: number \| string) => string \| number` | - | | `[nzParser]` | Specifies the value extracted from nzFormatter | `(value: string) => string \| number` | `(value: string) => value.trim().replace(/。/g, '.').replace(/[^\w\.-]+/g, '')` | | `[nzPrecision]` | precision of input value | `number` | - | | `[nzPrecisionMode]` | The method for calculating the precision of input value | `'cut' \| 'toFixed' \| ((value: number \| string, precision?: number) => number)` | `'toFixed'` | | `[nzSize]` | width of input box | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `[nzStep]` | The number to which the current value is increased or decreased. It can be an integer or decimal. | `number \| string` | `1` | | `[nzInputMode]` | enumerated attribute that hints at the type of data that might be entered by the user, [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode) | `string` | `decimal` | | `[nzPlaceHolder]` | Placeholder of select | `string` | - | | `[nzId]` | input id attribute inside the component | `string` | - | | `(ngModelChange)` | The callback triggered when the value is changed | `EventEmitter` | - | | `(nzFocus)` | focus callback | `EventEmitter` | - | | `(nzBlur)` | blur callback | `EventEmitter` | - | ### nz-input-number-group | Property | Description | Type | Default | | ----------------- | ----------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | | `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input number field, can work with `nzAddOnBefore` | `string \| TemplateRef` | - | | `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input number field, can work with `nzAddOnAfter` | `string \| TemplateRef` | - | | `[nzPrefix]` | The prefix icon for the Input Number, can work with `nzSuffix` | `string \| TemplateRef` | - | | `[nzSuffix]` | The suffix icon for the Input Number, can work with `nzPrefix` | `string \| TemplateRef` | - | | `[nzPrefixIcon]` | The prefix icon for the Input Number | `string` | - | | `[nzSuffixIcon]` | The suffix icon for the Input Number | `string` | - | | `[nzSize]` | The size of `nz-input-number-group` specifies the size of the included `nz-input-number` fields | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | #### Methods You can get instance by `ViewChild` | Name | Description | | ------- | ------------ | | focus() | get focus | | blur() | remove focus | --- Title: InputNumber URL: https://ng.ant.design/components/input-number/en --- ## When To Use When a numeric value needs to be provided. ## API ### nz-input-number | property | description | type | default | |--------------------|---------------------------------------------------------------------------------|-------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------| | `[ngModel]` | current value, two way binding | `number` | - | | `[nzId]` | ID of the input box | `string` | - | | `[nzPlaceHolder]` | placeholder | `string` | - | | `[nzAutoFocus]` | auto focus | `boolean` | `false` | | ~~`[nzBordered]`~~ | ~~whether to have border~~ | ~~`boolean`~~ | ~~`true`~~ | | `[nzVariant]` | Variants of InputNumber | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | | `[nzControls]` | whether to show up and down buttons | `boolean` | `true` | | `[nzDisabled]` | whether to disable | `boolean` | `false` | | `[nzFormatter]` | specify the format of the displayed value | `(value: number) => string` | - | | `[nzMax]` | maximum value | `number` | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | | `[nzMin]` | minimum value | `number` | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | | `[nzParser]` | specify how to convert back to a number from `formatter`, used with `formatter` | `(value: string) => number` | - | | `[nzPrecision]` | numerical precision, the `formatter` configuration takes precedence | `number` | - | | `[nzReadOnly]` | whether to read only | `boolean` | `false` | | `[nzStatus]` | status, optional `error` `warning` | `string` | - | | `[nzSize]` | input box size, optional `large` `default` `small` | `string` | `default` | | `[nzStep]` | step of each change, can be a decimal | `number` | `1` | | `(nzOnStep)` | callback when clicking the up and down arrows | `EventEmitter<{ value: number, offset: number, type: 'up' \| 'down' }>` | - | | `(nzFocus)` | callback when focus | `OutputRef` | - | | `(nzBlur)` | callback when blur | `OutputRef` | - | | `(ngModelChange)` | callback function when the value changes | `EventEmitter` | - | #### Methods You can get instance by `ViewChild` | Name | Description | | ------- | ------------ | | focus() | get focus | | blur() | remove focus | ## FAQ ### Why can the `value` exceed the `min` and `max` range in controlled mode? In controlled mode, developers may store related data by themselves. If the component constrains the data back to the range, it will cause the displayed data to be inconsistent with the actual stored data. This leads to potential data problems in some scenarios such as form fields. --- Title: Input URL: https://ng.ant.design/components/input/en --- ## When To Use - A user input in a form field is needed. - A search input is required. ## API ### [nz-input] All props of input supported by [w3c standards](https://www.w3schools.com/tags/tag_input.asp) and Angular can used in `nz-input`. | Property | Description | Type | Default | |----------------------|----------------------------------------------------------------------------------------------------------------------|----------------------------------------------------------|-------------| | `[nzSize]` | The size of the input box. Note: in the context of a form, the `large` size is used. | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzAutosize]` | Only used for `textarea`, height autosize feature, can be set to `boolean` or an object `{ minRows: 2, maxRows: 6 }` | `boolean \| { minRows: number, maxRows: number }` | `false` | | ~~`[nzBorderless]`~~ | ~~Whether hide border~~ | ~~`boolean`~~ | ~~`false`~~ | | `[nzVariant]` | Variants of Input | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `[nzStepperless]` | Whether hide stepper when input type is number | `boolean` | `true` | ### nz-input-group | Property | Description | Type | Default | | ----------------- | ---------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- | | `[nzAddOnAfter]` | The label text displayed after (on the right side of) the input field, can work with `nzAddOnBefore` | `string \| TemplateRef` | - | | `[nzAddOnBefore]` | The label text displayed before (on the left side of) the input field, can work with `nzAddOnAfter` | `string \| TemplateRef` | - | | `[nzPrefix]` | The prefix icon for the Input, can work with `nzSuffix` | `string \| TemplateRef` | - | | `[nzSuffix]` | The suffix icon for the Input, can work with `nzPrefix` | `string \| TemplateRef` | - | | `[nzSize]` | The size of `nz-input-group` specifies the size of the included `nz-input` fields | `'large' \| 'small' \| 'default'` | `'default'` | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | ### nz-textarea-count | Property | Description | Type | Default | | --------------------------- | ------------------------------------------------ | ----------------------- | --------------- | | `[nzMaxCharacterCount]` | `textarea` maximum character count displayed | `number` | - | | `[nzComputeCharacterCount]` | customized `characterCount` computation function | `(v: string) => number` | `v => v.length` | ### nz-input-otp | Property | Description | Type | Default | | --------------- | ------------------------------------------------------- | --------------------------------- | --------- | | `[disabled]` | Whether the input is disabled | boolean | `false` | | `[nzFormatter]` | Format display, blank fields will be filled with ` ` | `(value: string) => string` | - | | `[nzMask]` | Custom display, the original value will not be modified | `boolean \| null` | `null` | | `[nzLength]` | The number of input elements | `number` | 6 | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `[nzSize]` | The size of the input box | `'large' \| 'small' \| 'default'` | `default` | --- Title: Image URL: https://ng.ant.design/components/image/en --- ## When To Use - When you need to display pictures. - Display when loading a large image or fault-tolerant handling when loading fail. ## API ### [nz-image] | Property | Description | Type | Default | Global Config | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ------------- | | nzSrc | Image path | `string` | - | - | | nzFallback | Load failure fault-tolerant src | `string` | - | ✅ | | nzPlaceholder | Load placeholder src | `string` | - | ✅ | | nzDisablePreview | Whether to disable the preview | `boolean` | `false` | ✅ | | nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `false` | ✅ | | nzDirection | Text directionality | `Direction` | `'ltr'` | ✅ | | nzScaleStep | `1 + nzScaleStep` is the step to increase or decrease the scale | `number` | 0.5 | ✅ | Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) ### NzImageService | Property | Description | Type | Default | | -------- | --------------- | ----------------------- | ------- | | images | Preview images | `NzImage[]` | - | | options | Preview options | `NzImagePreviewOptions` | - | ## Related type definition ### NzImage | Property | Description | Type | Default | | -------- | ----------- | -------- | ------- | | src | src | `string` | - | | alt | alt | `string` | - | | width | width | `string` | - | | height | height | `string` | - | ### NzImagePreviewOptions | Property | Description | Type | Default | | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | | nzKeyboard | Whether support press `esc` to close, press `left` or `right` to switch image | `boolean` | `true` | | nzMaskClosable | Whether to close the image preview when the mask (area outside the image) is clicked | `boolean` | `true` | | nzCloseOnNavigation | Whether to close the image preview when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | | nzZIndex | The z-index of the image preview | `number` | 1000 | | nzZoom | Zoom rate | `number` | 1 | | nzRotate | Rotate rate | `number` | 0 | | nzScaleStep | `1 + nzScaleStep` is the step to increase or decrease the scale | `number` | 0.5 | | nzFlipHorizontally | Flip image on horizontal vector | `boolean` | `false` | | nzFlipVertically | Flip image on vertical vector | `boolean` | `false` | ### NzImagePreviewRef | Name | Description | | ----------------------------- | ------------------- | | switchTo(index: number): void | Switch to index | | prev(): void | Previous image | | next(): void | Next image | | close(): void | Close image preview | ### NzImageGroupComponent | Property | Description | Type | Default | | ----------- | ------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- | | nzScaleStep | The value of `nzScaleStep` will be applied to all the images inside, unless an image has its own `nzScaleStep` value specified. | `number` | - | --- Title: Icon URL: https://ng.ant.design/components/icon/en --- ## List of icons We keep in syncing with [antd](https://ant.design/components/icon/). ## API ### nz-icon, [nz-icon] | Property | Description | Type | Default | Global Config | |--------------------|-------------------------------------|--------------------------------|-------------|---------------| | `[nzType]` | Type of the ant design icon | `string` | - | - | | `[nzTheme]` | Type of the ant design icon | `'fill'\|'outline'\|'twotone'` | `'outline'` | ✅ | | `[nzSpin]` | Rotate icon with animation | `boolean` | `false` | - | | `[nzTwotoneColor]` | Primary color of the two-tone icon. | `string (hex color)` | - | ✅ | | `[nzIconfont]` | Type of the icon from iconfont | `string` | - | - | | `[nzRotate]` | Rotate degrees | `number` | - | - | ### NzIconService | Methods | Description | Parameters | |------------------------|-------------------------------------------------------------------------------|--------------------------| | `addIcon()` | To import icons statically | `IconDefinition` | | `addIconLiteral()` | To statically import custom icons | `string`, `string (SVG)` | | `fetchFromIconfont()` | To get icon assets from iconfont | `NzIconfontOption` | | `changeAssetsSource()` | Change the location of your icon assets, so that you can deploy them anywhere | `string` | ### SVG icons NG-ZORRO supports svg icons, which bring benefits below: - Support multiple colors. - Much more display accuracy in lower-level devices. - Able to change built-in icons with more props but no styles override. You can use `nz-icon` component and specify the `theme` property. ```html ``` ### Static loading and dynamic loading As for icons provided by Ant Design, there are two ways to import them into your project. **Static loading**. You can load icons statically by registering icons in `app.config.ts` with `provideNzIcons` API. ```typescript import { IconDefinition } from '@ant-design/icons-angular'; import { provideNzIcons } from 'ng-zorro-antd/icon'; // Import what you need. RECOMMENDED. ✔️ import { AccountBookFill, AlertFill, AlertOutline } from '@ant-design/icons-angular/icons'; const icons: IconDefinition[] = [AccountBookFill, AlertOutline, AlertFill]; // Import all. NOT RECOMMENDED. ❌ // import * as AllIcons from '@ant-design/icons-angular/icons'; // const antDesignIcons = AllIcons as Record; // const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]) export const appConfig: ApplicationConfig = { providers: [provideNzIcons(icons)] } ``` Actually this calls `addIcon` of `NzIconService`. Imported icons would be bundled into your `.js` files. Static loading may increase your bundle size, thus we recommend to use dynamic importing. > Icons used by `NG-ZORRO` itself are imported statically to increase loading speed. However, icons demonstrated on the > official website are loaded dynamically. **Dynamic loading**. This way would not increase your bundle size. When NG-ZORRO detects that the icon you want to render hasn't been registered yet, it would fire an HTTP request to load it. All you have to do is to config your `angular.json` like this: ```json { "assets": [ { "glob": "**/*", "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/", "output": "/assets/" } ] } ``` You can call `changeAssetsSource()` of `NzIconService` to change the location of your icon assets, so that you can deploy the assets to CDN. The parameter you passed would be added in front of `assets/`. Assume that you deploy the static assets under `https://mycdn.somecdn.com/icons/assets`. You can call `changeAssetsSource('https://mycdn.somecdn.com/icons')` to tell NG-ZORRO that all your resources are located there. ### Add Icons in Lazy-loaded Components Sometimes, you want to import icons in lazy components to avoid increasing the size of the `main.js`. You can import icons in `providers` of the component or router with `provideNzIconsPatch` API. ```typescript import { NzIconModule, provideNzIconsPatch } from 'ng-zorro-antd/icon'; // in xxx.component.ts @Component({ imports: [NzIconModule], providers: [provideNzIconsPatch([QuestionOutline])] }) class ChildComponent {} // or in xxx.routes.ts const routes: Routes = [{ path: '', providers: [provideNzIconsPatch([QuestionOutline])], }] ``` Once the QuestionOutline icon get loaded, it would be usable across the application. ### Set Default TwoTone Color When using two-tone icons, you should provide a global configuration like `{ nzIcon: { nzTwotoneColor: 'xxx' } }` via `NzConfigService` or call corresponding `set` method to change to default twotone color. ### Custom Font Icon We provided a `fetchFromIconfont` method, which is specified for iconfont, to help you use your own icons deployed at [iconfont.cn](http://iconfont.cn/) in a convenient way. ```typescript this._iconService.fetchFromIconfont({ scriptUrl: 'https://at.alicdn.com/t/font_8d5l8fzk5b87iudi.js' }); ``` And then you can use it like this: ```html ``` It creates a component that uses SVG sprites in essence. The following options are available: | Property | Description | Type | Default | |-------------|-------------------------------------------|----------|---------| | `scriptUrl` | The URL generated by iconfont.cn project. | `string` | - | The property `scriptUrl` should be set to import the svg sprite symbols. See [iconfont.cn document](https://www.iconfont.cn/help/detail?helptype=code) to learn about how to generate the `scriptUrl`. ### Namespace We introduced namespace so you could add your own icons in a convenient way. When you want to render an icon, you could assign `type` `namespace:name`. Dynamic importing and static importing are both supported. Static importing. Invoke `addIconLiteral` of `NzIconService`. Dynamic importing. Make sure that you have put your SVG resources in directory like `assets/${namespace}`. For example, if you have a `panda` icon and in `zoo` namespace, you should put the file `panda.svg` in `assets/zoo`. ## FAQ ### All my icons are gone! Have you ever read the docs above? ### There are two similar icons in a `` tag. What happened? In older versions of NG-ZORRO, there was a font file which would use `:before` to insert an icon according to a `` tag's `class`. So if you have two icons, try to remove `node_modules` and install again. If the problem is still there, search `@icon-url` and remove that line. ### I want to import all icons statically. What should I do? Although it is not recommended, actually we demonstrate it at section Static loading and dynamic loading: ```typescript import * as AllIcons from '@ant-design/icons-angular/icons'; const antDesignIcons = AllIcons as Record; const icons: IconDefinition[] = Object.keys(antDesignIcons).map(key => antDesignIcons[key]) ``` ### Does dynamic loading affect web pages' performance? We used several methods to reduce requests, such as static cache, dynamic cache and reusable request. It's basically not noticeable for visitors that icons are loaded asynchronously assuming web connections are fairly good. ### How do I know an icon's corresponding module to import? Capital camel-case `type & theme`, i.e. `alibaba` => `AlibabaOutline`. --- Title: HashCode URL: https://ng.ant.design/components/hash-code/en --- ## When To Use The hash code component is styled for 64-bit design, and if the data given is less than or more than 64-bit, it may bring some differences in presentation. ## API ### nz-hashCode | Property | Description | Type | Default | |--------------|-----------------------------------------------------|-------------------------------------|------------| | `[nzValue]` | The value of the hash code | `string` | - | | `[nzTitle]` | Description of the content in the upper left corner | `string` | `HashCode` | | `[nzLogo]` | Display in the upper right corner | `TemplateRef \| string` | - | | `[nzMode]` | Demonstration Mode | `single \| double \| strip \| rect` | `double` | | `[nzType]` | style | `default \| primary` | `primary` | | `(nzOnCopy)` | Clicking the Copy callback | `EventEmitter` | - | --- Title: Grid URL: https://ng.ant.design/components/grid/en --- ## Design concept
    100%
    25%
    25%
    25%
    25%
    33.33%
    33.33%
    33.33%
    50%
    50%
    66.66%
    33.33%
    In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections. We name the divided area 'box'. We suggest four boxes for horizontal arrangement at most, one at least. Boxes are proportional to the entire screen as shown in the picture above. To ensure a high level of visual comfort, we customize the typography inside of the box based on the box unit. ## Outline In the grid system, we define the frame outside the information area based on `row` and `column`, to ensure that every area can have stable arrangement. Following is a brief look at how it works: - Establish a set of `column` in the horizontal space defined by `row` (abbreviated col) - Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row` - The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `
    `. - If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement. Our grid systems base on Flex layout to allow the elements within the parent to be aligned horizontally - left, center, right, wide arrangement, and decentralized arrangement. The Grid system also supports vertical alignment - top aligned, vertically centered, bottom-aligned. You can also define the order of elements by using `order`. Layout uses a 24 grid layout to define the width of each "box", but does not rigidly adhere to the grid layout. ## API ### [nz-row] | Property | Description | Type | Default | | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------ | ------- | | `[nzAlign]` | the vertical alignment | `'top'\|'middle'\|'bottom'` | - | | `[nzGutter]` | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}`. or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | `string\|number\|object\|[number, number]\|[object, object]` | `0` | | `[nzJustify]` | horizontal arrangement | `'start'\|'end'\|'center'\|'space-around'\|'space-between'` | - | ### [nz-col] | Property | Description | Type | Default | | ------------ | ---------------------------------------------------------------------------------------------- | ------------------ | ------- | | `[nzFlex]` | flex layout style | `string \| number` | - | | `[nzOffset]` | the number of cells to offset Col from the left | `number` | `0` | | `[nzOrder]` | raster order | `number` | `0` | | `[nzPull]` | the number of cells that raster is moved to the left | `number` | `0` | | `[nzPush]` | the number of cells that raster is moved to the right | `number` | `0` | | `[nzSpan]` | raster number of cells to occupy, 0 corresponds to `display: none` | `number` | - | | `[nzXs]` | `<576px` and also default setting, could be a `span` value or an object containing above props | `number \| object` | - | | `[nzSm]` | `≥576px`, could be a `span` value or an object containing above props | `number \| object` | - | | `[nzMd]` | `≥768px`, could be a `span` value or an object containing above props | `number \| object` | - | | `[nzLg]` | `≥992px`, could be a `span` value or an object containing above props | `number \| object` | - | | `[nzXl]` | `≥1200px`, could be a `span` value or an object containing above props | `number \| object` | - | | `[nzXXl]` | `≥1600px`, could be a `span` value or an object containing above props | `number \| object` | - | The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`). --- Title: Graph URL: https://ng.ant.design/components/graph/en --- ## When To Use When you want to use graph in Angular. > The graph depends on d3-drag d3-zoom d3-selection d3-transition d3-shape (may be removed in next major version) ### Import Style ```less @import 'node_modules/ng-zorro-antd/graph/style/entry.less'; ``` ## API Dependencies: ```sh npm install dagre-compound dagre d3-transition d3-zoom d3-selection d3-shape d3-drag @types/d3 ``` ### nz-graph | Parameter | Description | Type | Default | | ----------------------- | -------------------------------------------------------------------------------- | ------------------------------------ | ------- | | `[nzGraphData]` | Data source | `NzGraphData(data: NzGraphDataDef?)` | `` | | `[nzRankDirection]` | Graph Direction | `TB` \| `BT` \| `LR` \| `RL` | `LR` | | `[nzAutoSize]` | Whether to automatically adjust the height of the node, the default equal height | `boolean` | `false` | | `[nzGraphLayoutConfig]` | Global config of graph | `NzGraphLayoutConfig` | `` | #### Methods | Method | Description | | ------------- | ----------------------------------------------------------------------- | | `fitCenter()` | Move graph to center(use `nz-graph-zoom` instead if zooming is enabled) | ### [nz-graph-zoom] | Parameter | Description | Type | Default | | -------------------- | -------------------------- | -------------------------------------------- | ------- | | `[(nzZoom)]` | Default zoom scale | `number` | `1` | | `[nzMinZoom]` | Minimum zoom scale | `number` | `0.1` | | `[nzMaxZoom]` | Maximum zoom scale | `number` | `10` | | `(nzTransformEvent)` | Event of zooming | `() => NzZoomTransform` | `` | | `(fitCenter)` | Move graph to center | `() => void` | `void` | | `(focus)` | Move target node to center | `(e: SVGGElement, duration: number) => void` | `void` | #### NzGraphData | Method | Description | Type | | ---------------- | ----------------------------- | -------------------------------- | | `setData` | set data source | `(data: NzGraphDataDef) => void` | | `toggle` | toggle group node | `(nodeName: string) => void` | | `expand` | expand group node | `(nodeName: string) => void` | | `expandAll` | expand all group nodes | `(nodeName: string) => void` | | `collapse` | collapse group node | `(nodeName: string) => void` | | `isExpand` | get if expanded of node | `(nodeName: string) => boolean` | | `expansionModel` | model of expanded nodes' info | `SelectionModel` | ### NzGraphLayoutConfig | Method | Description | Type | | --------------------- | ------------------- | ---------------------------------------------------------------------------------------------------------------- | | `layout` | graph layout config | `{ nodeSep: number; rankSep: number; edgeSep: number; }` | | `subScene` | group node config | `{ paddingTop: number; paddingBottom: number; paddingLeft: number; paddingRight: number; labelHeight: number; }` | | `defaultCompoundNode` | group node size | `{ width: number; height: number; maxLabelWidth: number; }` | | `defaultNode` | default node size | `{ width: number; height: number; labelOffset: number; maxLabelWidth: number; }` | #### NzGraphDataDef | Parameter | Description | Type | Default | | ---------- | ----------- | ----------------------------------------------------------------------------------------------------- | ------- | | `nodes` | nodes | `Array<{ id: number\|string; label?: string; width?: number; height?: number; [key: string]: any; }>` | `[]` | | `edges` | edges | `Array<{ v: number\|string; w: number\|string; [key: string]: any; }>` | `[]` | | `compound` | group | `{ [parent: string]: string[]; }` | `null` | #### NzGraphNode | Parameter | Description | Type | | ---------------- | ---------------------------- | ------------------------------------ | | `id` | id | `number\|string` | | `label?` | node content | `string` | | `name` | node name | `number\|string` | | `type` | node type(group: 0, node: 1) | `number` | | `parentNodeName` | parentNode name | `string` | | `coreBox` | coreBox | `{ width: number; height: number; }` | | `xOffset` | x-offset | `number` | | `yOffset` | y-offset | `number` | | `width` | width | `number` | | `height` | height | `number` | | `[key: string]` | user inputs | `any` | #### NzGraphEdge | Parameter | Description | Type | | --------- | ------------ | ---------------------------------- | | `id` | id | `string` | | `v` | source node | `number\|string` | | `w` | target node | `number\|string` | | `label?` | edge content | `string` | | `points` | points | `Array<{ x: number; y: number; }>` | #### NzGraphGroupNode | Parameter | Type | | ---------- | -------------------------------------- | | `expanded` | `boolean` | | `nodes` | `Array` | | `edges` | `NzGraphEdge[]` | ### [nzGraphNode] Customize the graph node template ```html {{ node.name }} - {{ node.label }} ``` ### [nzGraphGroupNode] Customize the graph group-node template ```html {{ node.name }} - {{ node.label }} ``` ### [nzGraphEdge] Customize the graph edge template ```html ``` ### Styling The Component styles only contain the necessary positional properties and simple styles, you can customize the style by overriding the following class. - `.nz-graph` `nz-graph` The `nz-graph` component namespace - `.nz-graph-nodes` The class name of container covered all nodes - `.nz-graph-node` The class name of `nz-graph-node` - `.nz-graph-node-expanded` The class name of expanded node - `.nz-graph-group-node` The class name of group node - `.nz-graph-base-node` The class name of leaf(OP) node - `.nz-graph-edges` The class name of container covered edges in the target node - `.nz-graph-edge` The class name of edge - `path.nz-graph-edge-line` The class name of svg:path element - `.nz-graph-edge-text` The class name of svg:text element ## More - [dagre-compound](https://www.npmjs.com/package/dagre-compound): Dagre-based nested layout calculation library - [SelectionModel](https://github.com/angular/components/blob/master/src/cdk/collections/selection-model.ts) --- Title: Form URL: https://ng.ant.design/components/form/en --- ## When To Use - When you need to create an instance or collect information. - When you need to validate fields in certain rules. > Form is totally based on [Angular Forms](https://angular.dev/guide/forms), you can use [reactive forms](https://angular.dev/guide/forms/reactive-forms) or [template-driven-forms](https://angular.dev/guide/forms/template-driven-forms). > Please make sure you have read the official form document before using the component. ## Form You can align the controls of a `form` using the `layout` prop： - `horizontal`：to horizontally align the `label`s and controls of the fields. (Default) - `vertical`：to vertically align the `label`s and controls of the fields. - `inline`：to render form fields in one line. ### nz-form-item Used to separate the item in forms, contains label(optional) and control field. ### nz-form-label The label of the form item, optional. ### nz-form-control A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. ```html
    E-mail ``` ## API ### [nz-form] | Property | Description | Type | Default Value | Global Config | | --------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ----------------------------------------------- | ------------- | | `[nzLayout]` | Form layout | `'horizontal' \| 'vertical' \| 'inline'` | `'horizontal'` | | `[nzAutoTips]` | Set default props `[nzAutoTips]` value of `nz-form-control`, please refer to the example: **Auto tips** | `Record>` | `{}` | ✅ | | `[nzDisableAutoTips]` | Set default props `[nzDisableAutoTip]` value of `nz-form-control` | `boolean` | `false` | ✅ | | `[nzNoColon]` | Set default props `[nzNoColon]` value of `nz-form-label` | `boolean` | `false` | ✅ | | `[nzTooltipIcon]` | Set default props `[nzTooltipIcon]` value of `nz-form-label` | `string \| { type: string; theme: ThemeType }` | `{ type: 'question-circle', theme: 'outline' }` | ✅ | | `[nzLabelAlign]` | Set default props `[nzLabelAlign]` value of `nz-form-label` | `'left' \| 'right'` | `'right'` | | `[nzLabelWrap]` | Set default props `[nzLabelWrap]` value of `nz-form-label` | `boolean` | `false` | ### nz-form-item Used to separate the item in forms, contains label(optional) and control field. > All api in [nz-row](/components/grid/zh) can be used in `nz-form-item`. ### nz-form-label The label of the form item, optional. > All api in [nz-col](/components/grid/zh) can be used in `nz-form-label`. | Property | Description | Type | Default Value | | ------------------ | -------------------------------------------- | ----------------------------- | ------------- | | `[nzRequired]` | add required style to current item | `boolean` | `false` | | `[nzNoColon]` | whether to not display `:` after label text. | `boolean` | `false` | | `[nzFor]` | The `for` property of `label` | `string` | - | | `[nzTooltipTitle]` | Set tooltip info | `string \| TemplateRef` | - | | `[nzTooltipIcon]` | Set icon of tooltip info | `string \| NzFormTooltipIcon` | - | | `[nzLabelAlign]` | The text align of label | `'left' \| 'right'` | `'right'` | | `[nzLabelWrap]` | whether label can be wrap | `boolean` | `false` | ### nz-form-control > Note：Due to the lack of partial Observable in [Angular Form](https://github.com/angular/angular/issues/10887), you have to notify `nz-form-control` to update its status with `updateValueAndValidity` when you update form status using methods like `markAsDirty`. A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. > All api in [nz-col](/components/grid/zh) can be used in `nz-form-control`. | Property | Description | Type | Default Value | | --------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------- | ----------------------------------------------------- | | `[nzValidateStatus]` | Will generate status based on the input `FormControl`, `NgModel` or string, the default value is the first `FormControl` or `NgModel` in `nz-form-control` | `'success' \| 'warning' \| 'error' \| 'validating' \| FormControl \| NgModel` | first `FormControl` or `NgModel` in `nz-form-control` | | `[nzHasFeedback]` | Used with `nzValidateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | `boolean` | `false` | | `[nzExtra]` | The extra prompt message | `string \| TemplateRef` | - | | `[nzSuccessTip]` | Tip display when validate success | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - | | `[nzWarningTip]` | Tip display when validate warning | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - | | `[nzErrorTip]` | Tip display when validate error | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - | | `[nzValidatingTip]` | Tip display when validating | `string \| TemplateRef<{ $implicit: FormControl \| NgModel }>` | - | | `[nzAutoTips]` | The object of the tips, please refer to the example: **Auto tips** | `Record>` | - | | `[nzDisableAutoTips]` | Disable Auto Tips | `boolean` | - | ### nz-form-split The split icon of `-` ### nz-form-text Text in `nz-form-control` --- Title: FloatButton URL: https://ng.ant.design/components/float-button/en --- ## When To Use - For global functionality on the site. - Buttons that can be seen wherever you browse. ## API ### common API | Property | Description | Type | Default | |-------------------|-------------------------------------------|---------------------------------|-----------| | `[nzIcon]` | Set the icon component of button | `TemplateRef` | - | | `[nzDescription]` | Text and other | `TemplateRef` \| `string` | - | | `[nzType]` | Setting button type | `default` \| `primary` | `default` | | `[nzShape]` | Setting button shape | `circle` \| `square` | `circle` | | `[nzHref]` | The target of hyperlink | `string` | - | | `[nzTarget]` | Specifies where to display the linked URL | `string` | - | | `(nzOnClick)` | Set the handler to handle `click` event | `EventEmitter` | - | ### nz-float-button-group | Property | Description | Type | Default | |--------------------|-----------------------------------------------|----------------------------------------|----------| | `[nzShape]` | Set button group shape | `circle` \| `square` | `circle` | | `[nzTrigger]` | Which action can trigger menu open/close | `click` \| `hover` | - | | `[nzOpen]` | Whether the menu is visible or not | `boolean` | - | | `[nzPlacement]` | Customize menu animation placement | `top` \| `right` \| `bottom` \| `left` | `top` | | `(nzOnOpenChange)` | Callback executed when active menu is changed | `EventEmitter` | - | ### nz-float-button-top | Property | Description | Type | Default | Global Config | |------------------------|-------------------------------------------------------------------------------------------|-------------------------|----------|---------------| | `[nzVisibilityHeight]` | the `nz-float-button-top` button will not show until the scroll height reaches this value | `number` | `400` | ✅ | | `[nzTarget]` | specifies the scrollable area dom node | `string` \| `Element` | `window` | | `[nzDuration]` | Time to return to top (ms) | `number` | `450` | | `(nzOnClick)` | a callback function, which can be executed when you click the button | `EventEmitter` | - | --- Title: Flex URL: https://ng.ant.design/components/flex/en --- ## When To Use - Good for setting spacing between elements. - Suitable for setting various horizontal and vertical alignments. ### Difference with Space component - Space is used to set the spacing between inline elements. It will add a wrapper element for each child element for inline alignment. Suitable for equidistant arrangement of multiple child elements in rows and columns. - Flex is used to set the layout of block-level elements. It does not add a wrapper element. Suitable for layout of child elements in vertical or horizontal direction, and provides more flexibility and control. ## API ### [nz-flex] | Property | Description | Type | Default | | -------------- | -------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------- | ---------- | | `[nzVertical]` | Is direction of the flex vertical, use `flex-direction: column` | `boolean` | `false` | | `[nzJustify]` | Sets the alignment of elements in the direction of the main axis | reference [justify-content](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) | `'normal'` | | `[nzAlign]` | Sets the alignment of elements in the direction of the cross axis | reference [align-items](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) | `'normal'` | | `[nzGap]` | Sets the gap between items | `'small' \| 'middle' \| 'large' \| number \| string` | `0` | | `[nzWrap]` | Set whether the element is displayed in a single line or in multiple lines | reference [flex-wrap](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap) | `'nowrap'` | | `[nzFlex]` | Flex CSS shorthand properties | reference [flex](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) | `'unset'` | --- Title: Image URL: https://ng.ant.design/components/experimental-image/en --- ## When To Use - When you need the browser to prioritize image loading (needs to be handled in SSR). - When you need to optimize for HD displays (e.g. retina screens). - When using image CDN. - More in [Image documentation](/components/image/en) - Next steps * Add [sizes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-sizes) attribute and responsive support. ## API ### nz-image | Property | Description | Type | Default | Global Config | |----------------|-----------------------------------------------------------------------------------------------------------|--------------------|-------------------------|---------------| | `nzSrc` | URL | `string` | - | | | `nzAlt` | Alt | `string` | - | | | `nzWidth` | Width | `number\|string` | `auto` | | | `nzHeight` | Height | `number\|string` | `auto` | | | `nzAutoSrcset` | Whether to optimize image loading | `boolean` | `false` | ✅ | | `nzSrcLoader` | Loader | `NzImageSrcLoader` | `defaultImageSrcLoader` | ✅ | | `nzPriority` | Whether to add [preload](https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content) (only SSR) | `boolean` | `false` | ✅ | ### NzImageSrcLoader ```ts export type NzImageSrcLoader = (params: { src: string; width: number }) => string; ``` ## Note ### nzSrcLoader Using `nzSrcLoader` helps you to fill in key information about the requested image, such as `src` and `width`, which defaults to ```ts export const defaultImageSrcLoader: NzImageSrcLoader = ({ src }) => { return src; }; ``` Built-in image CND creation method ```ts /** * AliObjectsLoader return format * {domain}/{src}?x-oss-process=image/resize,w_{width} */ export function createAliObjectsLoader(domain: string): NzImageSrcLoader; /** * ImgixLoader return format * {domain}/{src}?format=auto&fit=max&w={width} */ export function createImgixLoader(domain: string): NzImageSrcLoader; /** * CloudinaryLoader return format * {domain}/c_limit,q_auto,w_{width}/{src} */ export function createCloudinaryLoader(domain: string): NzImageSrcLoader; ``` ### Responsive images and preloaded images Using responsive images can help web pages display well on different devices. Preloading images can help you load images faster, for more information please refer to. - [preloading responsive images](https://web.dev/preload-responsive-images/) - [next.js image component and image optimization](https://nextjs.org/docs/basic-features/image-optimization) --- Title: Empty URL: https://ng.ant.design/components/empty/en --- ## When To Use When there is no data provided, display for friendly tips. ## API ### nz-empty | Property | Description | Type | Default | | --------------------- | ------------------------------------------------------------- | ------------------------------------- | ------- | | `[nzNotFoundImage]` | Customize image. Will tread as image url when string provided | `string \| TemplateRef` | - | | `[nzNotFoundContent]` | Custom description | `string \| TemplateRef \| null` | - | | `[nzNotFoundFooter]` | Custom Footer | `string \| TemplateRef` | - | ### `NZ_CONFIG` The `nzEmpty` interface has properties as follows: | Properties | Description | Type | | ----------------------- | ------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | | `nzDefaultEmptyContent` | User default empty component. You can restore the system default empty content by providing `undefined` | `Type\|TemplateRef\|string\|undefined` | ### InjectionToken | Token | Description | Parameters | | ------------------------- | --------------------------------------------------------------------------------------------------- | ---------- | | `NZ_EMPTY_COMPONENT_NAME` | Would be injected to `NZ_DEFAULT_EMPTY_CONTENT`, telling that component its parent component's name | `string` | ### Global Customizable Empty Content You may notice or used some inputs like `nzNotFoundContent` in some components. Now they would use `Empty` component. So you can provide `nzDefaultEmptyContent` to customize them. ```ts { provide: NZ_CONFIG, useValue: { empty: { nzDefaultEmptyContent } } } ``` --- Title: Dropdown URL: https://ng.ant.design/components/dropdown/en --- ## When To Use If there are too many operations to display, you can wrap them in a `Dropdown`. By clicking/hovering on the trigger, a dropdown menu should appear, which allows you to choose one option and execute relevant actions. ## API ### [nz-dropdown] | Property | Description | Type | Default | | ---------------------- | ------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | -------------- | | `[nzDropdownMenu]` | Dropdown menu | `NzDropdownMenuComponent` | - | | `[nzDisabled]` | whether the dropdown menu is disabled | `boolean` | - | | `[nzPlacement]` | placement of pop menu | `'bottomLeft' \| 'bottomCenter' \| 'bottomRight' \| 'topLeft' \| 'topCenter' \| 'topRight'` | `'bottomLeft'` | | `[nzTrigger]` | the trigger mode which executes the drop-down action | `'click' \| 'hover'` | `'hover'` | | `[nzClickHide]` | whether hide menu when click | `boolean` | `true` | | `[nzVisible]` | whether the dropdown menu is visible, double binding | `boolean` | - | | `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - | | `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - | | `(nzVisibleChange)` | a callback function takes an argument: `nzVisible`, is executed when the visible state is changed | `EventEmitter` | - | You should use [nz-menu](/components/menu/en) in `nz-dropdown`. The menu items and dividers are also available by using `nz-menu-item` and `nz-menu-divider`. > Note: `[nz-menu]` of `nz-dropdown` is unselectable by default, you can make it selectable via `
      `. > > The `nzMode` of `[nz-menu]` inside `nz-dropdown-menu` can only be the default value `vertical`. ### nz-dropdown-menu Wrap Dropdown Menu and pass to `[nz-dropdown]` and `NzContextMenuService`, you can export it via Template Syntax `nzDropdownMenu` > Note：Every `[nz-dropdown]` should pass independent `nz-dropdown-menu`. ```html Hover me
      • 1st menu item
      • 2nd menu item
      • 3rd menu item
       ``` ### NzContextMenuService Create dropdown with contextmenu, the detail can be found in the example above | Property | Description | Arguments | Return Value | | -------- | --------------- | --------------------------------------------------------------------------- | ---------------------- | | create | create dropdown | `($event:MouseEvent \| {x:number, y:number}, menu:NzDropdownMenuComponent)` | `EmbeddedViewRef` | | close | close dropdown | - | - | --- Title: Drawer URL: https://ng.ant.design/components/drawer/en --- A Drawer is a panel that is typically overlaid on top of a page and slides in from the side. It contains a set of information or actions. Since that user can interact with the Drawer without leaving the current page, tasks can be achieved more efficient within the same context. ## When To Use - Use a Form to create or edit a set of information. - Processing subtasks. When subtasks are too heavy for Popover and we still want to keep the subtasks in the context of the main task, Drawer comes very handy. - When a same Form is needed in multiple places. ## API ### nz-drawer | Props | Description | Type | Default | Global Config | | ----------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------- | ------------- | | `[nzClosable]` | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` | | `[nzCloseIcon]` | Custom close icon | `string \| TemplateRef \| null` | `'close'` | | `[nzExtra]` | Extra actions area at corner. | `string \| TemplateRef \| null` | - | | `[nzMask]` | Whether to show mask or not. | `boolean` | `true` | ✅ | | `[nzMaskClosable]` | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ | | `[nzCloseOnNavigation]` | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ | | `[nzKeyboard]` | Whether support press esc to close | `boolean` | `true` | | `[nzMaskStyle]` | Style for Drawer's mask element. | `object` | `{}` | | `[nzBodyStyle]` | Body style for drawer body element. Such as height, padding etc. | `object` | `{}` | | `[nzTitle]` | The title for Drawer. | `string \| TemplateRef` | - | | `[nzFooter]` | The footer for Drawer. | `string \| TemplateRef` | - | | `[nzVisible]` | Whether the Drawer dialog is visible or not, you can use `[(nzVisible)]` two-way binding | `boolean` | `false` | | `[nzPlacement]` | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | | `[nzSize]` | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` | | `[nzWidth]` | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - | | `[nzHeight]` | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - | | `[nzOffsetX]` | The X coordinate offset(px), only when placement is `'right'` or `'left'`. | `number` | `0` | | `[nzOffsetY]` | The Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` | | `[nzWrapClassName]` | The class name of the container of the Drawer dialog. | `string` | - | | `[nzZIndex]` | The `z-index` of the Drawer. | `number` | `1000` | | `(nzOnClose)` | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | `EventEmitter` | - | ### NzDrawerService | Method | Description | Params | Return | | --------------- | ------------------------- | ----------------------- | ------------------- | | create | create and open an Drawer | `NzDrawerOptions` | `NzDrawerRef` | ### NzDrawerOptions | Params | Description | Type | Default | Global Config | | ------------------- |----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| ------------------------------------------------------------------ | ----------- | ------------- | | nzContent | The drawer body content. | `TemplateRef<{ $implicit: D, drawerRef: NzDrawerRef }> \| Type` | - | | nzContentParams | Deprecated: Use NzData instead. The component inputs the param / The Template context | `D` | - | | nzData | Will be a template variable when nzContent is TemplateRef.
      object, will be the value of the injection token NZ_DRAWER_DATA when nzContent is a component | `D` | - | | nzClosable | Whether a close (x) button is visible on top left of the Drawer dialog or not. | `boolean` | `true` | | nzCloseIcon | Custom close icon | `string \| TemplateRef \| null` | `'close'` | | nzExtra | Extra actions area at corner. | `string \| TemplateRef \| null` | - | | nzOnCancel | Execute when click on the mask or the upper cancel button, This function returns a promise, which is automatically closed when the execution is complete or the promise ends (return false to prevent closing) | `() => Promise` | - | | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | `true` | ✅ | | nzCloseOnNavigation | Whether to close the drawer when the user goes backwards/forwards in history. Note that this usually doesn't include clicking on links (unless the user is using the HashLocationStrategy). | `boolean` | `true` | ✅ | | nzMask | Whether to show mask or not. | `boolean` | `true` | ✅ | | nzDirection | Direction of the text in the modal | `'ltr' \| 'rtl'` | - | ✅ | | nzKeyboard | Whether support press esc to close | `boolean` | `true` | | nzMaskStyle | Style for Drawer's mask element. | `object` | `{}` | | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | `{}` | | nzTitle | The title for Drawer. | `string \| TemplateRef` | - | | nzFooter | The footer for Drawer. | `string \| TemplateRef` | - | | nzSize | Preset size of drawer, default `378px` and large `736px`. | `'default' \| 'large'` | `'default'` | | nzWidth | Width of the Drawer dialog, only when placement is `'right'` or `'left'`, having a higher priority than `nzSize`. | `number \| string` | - | | nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`, having a higher priority than `nzSize`. | `number \| string` | - | | nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | - | | nzZIndex | The `z-index` of the Drawer. | `number` | `1000` | | nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | | nzOffsetX | The X coordinate offset(px). | `number` | `0` | | nzOffsetY | The Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | `0` | ### NZ_DRAWER_DATA NZ_DRAWER_DATA injection token is used to retrieve nzData in the custom component. The drawer created by the service method NzDrawerService.create() inject a NZ_DRAWER_DATA token (if nzContent is used as Component) to retrieve the parameters that have used to the 'nzContent component' ### NzDrawerRef #### Methods | Name | Description | Type | | ---------------------- | ------------------------------------------------------------------------- | ------------------------------- | | close | close the drawer. | `(result?: R) => void` | | open | open the drawer. | `() => void` | | getContentComponent | Returns the instance when `nzContent` is the component. | `() => T \| null` | | getContentComponentRef | Returns the reference of the component when `nzContent` is the component. | `() => ComponentRef \| null` | #### Property | Name | Description | Type | | --------------- | ------------------------------------------------------------------------------- | ---------------------------------------- | | afterOpen | Callback called after open. | `Observable` | | afterClose | Callback called after close. | `Observable` | | nzCloseIcon | Custom close icon | `string \| TemplateRef \| null` | | nzClosable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | `boolean` | | nzMaskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | `boolean` | | nzMask | Whether to show mask or not. | `boolean` | | nzKeyboard | Whether support press esc to close | `boolean` | | nzMaskStyle | Style for Drawer's mask element. | `object` | | nzBodyStyle | Body style for modal body element. Such as height, padding etc. | `object` | | nzTitle | The title for Drawer. | `string \| TemplateRef` | | nzFooter | The footer for Drawer. | `string \| TemplateRef` | | nzWidth | Width of the Drawer dialog. | `number \| string` | | nzHeight | Height of the Drawer dialog, only when placement is `'top'` or `'bottom'`. | `number \| string` | | nzWrapClassName | The class name of the container of the Drawer dialog. | `string` | | nzZIndex | The `z-index` of the Drawer. | `number` | | nzPlacement | The placement of the Drawer. | `'top' \| 'right' \| 'bottom' \| 'left'` | | nzOffsetX | The X coordinate offset(px). | `number` | | nzOffsetY | The Y coordinate offset(px), only when placement is `'top'` or `'bottom'`. | `number` | --- Title: Divider URL: https://ng.ant.design/components/divider/en --- ## When To Use - Divide sections of article. - Divide inline text and links such as the operation column of table. ## API ### nz-divider | Property | Description | Type | Default | | ----------------- | --------------------------------------- | --------------------------------- | -------------- | | `[nzDashed]` | whether line is dashed | `boolean` | `false` | | `[nzType]` | direction type of divider | `'horizontal' \| 'vertical'` | `'horizontal'` | | `[nzText]` | inner text of divider | `string \| TemplateRef` | - | | `[nzPlain]` | Divider text show as plain style | `boolean` | `false` | | `[nzOrientation]` | inner text orientation | `'center' \| 'left' \| 'right'` | `'center'` | | `[nzVariant]` | Whether line is dashed, dotted or solid | `'dashed' \| 'dotted' \| 'solid'` | `'solid'` | --- Title: Descriptions URL: https://ng.ant.design/components/descriptions/en --- ## When To Use Commonly displayed on the details page. ## API ### nz-descriptions | Property | Description | Type | Default | Global Config | | -------------- | --------------------------------------------------------------------------------------------------------------- | ---------------------------------- | ----------------------------------------------- | ------------- | | `[nzTitle]` | Describe the title of the list, displayed at the top | `string\|TemplateRef` | `false` | | `[nzExtra]` | The action area of the description list, placed at the top-right | `string\|TemplateRef` | `-` | | `[nzBordered]` | Whether to display the border | `boolean` | `false` | ✅ | | `[nzColumn]` | The number of `nz-descriptions-item` in a row. It could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | `number\|object` | `{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }` | ✅ | | `[nzSize]` | Set the size of the list. Only works when `nzBordered` is set | `'default' \| 'middle' \| 'small'` | `'default'` | ✅ | | `[nzColon]` | Show colon after title | `boolean` | `true` | ✅ | | `[nzLayout]` | Set the layout of the list | `'horizontal' \| 'vertical'` | `'horizontal'` | | ### nz-descriptions-item | Property | Description | Type | Default | | ----------- | ------------------------------ | --------- | --------------------------- | | `[nzTitle]` | Description of the content | `boolean` | `string\|TemplateRef` | | `[nzSpan]` | The number of columns included | `number` | `1` | --- Title: DatePicker URL: https://ng.ant.design/components/date-picker/en --- ## When To Use By clicking the input box, you can select a date from a popup calendar. ## API **Note:** Some of nz-date-picker's locale are coming from [Angular i18n](https://angular.dev/guide/i18n), that should be provided in the file `app.config.ts`. For example: ```typescript import { registerLocaleData } from '@angular/common'; import en from '@angular/common/locales/en'; registerLocaleData(en); ``` **Note:** All input and output date objects are [Date](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date), you can manipulate it with [date-fns](https://date-fns.org/). ### Common API The following APIs are shared by nz-date-picker, nz-range-picker. | Property | Description | Type | Default | Global Config | |--------------------------|------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------|------------------------------------------------------------------------------------------------------------|---------------| | `[nzId]` | input id attribute inside the component | `string` | - | | `[nzAllowClear]` | Whether to show clear button | `boolean` | `true` | - | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | - | | `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | | `[nzDefaultPickerValue]` | default picker date | `Date` \| `Date[]` | - | - | | `[nzDisabled]` | determine whether the nz-date-picker is disabled | `boolean` | `false` | - | | `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | - | | `[nzDropdownClassName]` | to customize the className of the popup calendar | `string` | - | - | | `[nzFormat]` | to set the date format, see `nzFormat special instructions` | `string` | - | | `[nzInputReadOnly]` | set the readonly attribute of the input tag (avoids virtual keyboard on touch devices) | `boolean` | `false` | - | | `[nzLocale]` | localization configuration | `object` | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | - | | `[nzMode]` | Set picker mode | `'date' \| 'week' \| 'month' \| 'quarter' \| 'year'` | `'date'` | | `[nzPlaceHolder]` | placeholder of date input | `string` \| `string[]` | - | | `[nzPopupStyle]` | to customize the style of the popup calendar | `object` | `{}` | - | | `[nzRenderExtraFooter]` | render extra footer in panel | `TemplateRef \| string \| (() => TemplateRef \| string)` | - | | `[nzSize]` | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `'large' \| 'small'` | - | - | | `[nzStatus]` | Set validation status | `'error' \| 'warning'` | - | | `[nzPlacement]` | The position where the selection box pops up | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | | | `[nzSuffixIcon]` | the custom suffix icon | `string` \| `TemplateRef` | - | ✅ | | ~~`[nzBorderless]`~~ | ~~remove the border~~ | ~~`boolean`~~ | ~~`false`~~ | - | | `[nzVariant]` | Variants of DatePicker | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | ✅ | | `[nzInline]` | inline mode | `boolean` | `false` | - | | `(nzOnOpenChange)` | a callback emitter, can be executed whether the popup calendar is popped up or closed | `EventEmitter` | - | - | | `(nzOnPanelChange)` | a callback emitter, can be executed when the panel changes | `EventEmitter` | - | - | ### Common Methods | Name | Description | | --------- | -------------------- | | `open()` | open calendar panel | | `close()` | close calendar panel | ### nz-date-picker | Property | Description | Type | Default | | ------------- | ----------- | ------ | ------- | | `[(ngModel)]` | Date | `Date` | - | ### nz-date-picker[nzMode="date"] | Property | Description | Type | Default | | -------------------- | ------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------ | --------------------------------------------------------------------------- | | `[nzDateRender]` | custom rendering function for date cells (Not support by month-picker/year-picker) | - | `TemplateRef \| string \| ((d: Date) => TemplateRef \| string)` | | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date) => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) | | `[nzShowToday]` | whether to show 'Today' button | `boolean` | `true` | | `[nzShowNow]` | whether to show 'Now' button on panel when `nzShowTime` is set | `boolean` | `true` | | `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` | | `(nzOnOk)` | callback when click ok button | `EventEmitter` | - | ### nz-range-picker | Property | Description | Type | Default | | ---------------------- | ----------------------------------------------------------- | ------------------------------------------------------------------ | ------- | | `[(ngModel)]` | Date | `Date[]` | - | | `[nzRanges]` | preseted ranges for quick selection | `{ [ key: string ]: Date[] } \| { [ key: string ]: () => Date[] }` | - | | `[nzSeparator]` | separator | `string \| TemplateRef` | `'~'` | | `(nzOnCalendarChange)` | The start time or the end time of the range change callback | `EventEmitter` | - | ### nz-range-picker[nzMode="date"] | Property | Description | Type | Default | | -------------------- | ------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- | ---------------------------------------------------- | | `[nzShowTime]` | to provide an additional time selection | `object \| boolean` | [TimePicker Options](/components/time-picker/en#api) | | `[nzDisabledTime]` | to specify the time that cannot be selected | `(current: Date, partial: 'start' \| 'end') => { nzDisabledHours, nzDisabledMinutes, nzDisabledSeconds }` | - | | `[nzShowWeekNumber]` | whether to show the week number on each row (Only supported by date picker. Week picker always shows week numbers) | `boolean` | `false` | | `(nzOnOk)` | click ok callback | `EventEmitter` | - | > Currently, supported `nz-time-picker` parameters in `nzShowTime` are: `nzFormat`, `nzHourStep`, `nzMinuteStep`, `nzSecondStep`, `nzDisabledHours`, `nzDisabledMinutes`, `nzDisabledSeconds`, `nzHideDisabledOptions`, `nzDefaultOpenValue`, `nzAddOn` ## FAQ ### Why does manual input not take effect after setting `nzFormat="dd/MM/yyyy"` You need to use `date-fns`. Date formatting currently supports two methods: `DatePipe` ( default, [syntax reference](https://angular.dev/api/common/DatePipe)) and `date-fns` ( see [`How to format a date using date-fns`](/docs/i18n/en#How%20to%20format%20a%20date%20using%20Date-fns)).NG-ZORRO takes the function provided by `date-fns` to implement date deserialization after using it. --- Title: cron form URL: https://ng.ant.design/components/cron-expression/en --- ## When To Use When you want to use cron expression in Angular. ## API Install `cron-parser` in your project first: ```sh npm install cron-parser ``` ### nz-cron-expression | Parameter | Description | Type | Default | | --------------------- | ------------------------------------ | ----------------------------- | --------- | | `[nzType]` | Cron rule type | `'linux'｜'spring'` | `linux` | | `[nzDisabled]` | Disable | `boolean` | `false` | | `[nzBorderless]` | Whether to hide the border | `boolean` | `false` | | `[nzSize]` | The size of the input box. | `'large'｜'small'｜'default'` | `default` | | `[nzCollapseDisable]` | Hide collapse | `boolean` | `false` | | `[nzExtra]` | Render the content on the right | `TemplateRef` | - | | `[nzSemantic]` | Custom rendering next execution time | `TemplateRef` | - | ## Note ### Supported format ```text * * * * * * ┬ ┬ ┬ ┬ ┬ ┬ │ │ │ │ │ | │ │ │ │ │ └ day of week (0 - 7, 1L - 7L) (0 or 7 is Sun) │ │ │ │ └───── month (1 - 12) │ │ │ └────────── day of month (1 - 31, L) │ │ └─────────────── hour (0 - 23) │ └──────────────────── minute (0 - 59) └───────────────────────── second (0 - 59, optional) ``` --- Title: ColorPicker URL: https://ng.ant.design/components/color-picker/en --- ## When To Use Used when the user needs to customize the color selection. ## API ### nz-color-picker | Parameter | Description | Type | Default | | -------------------- | ------------------------------------- | -------------------------------------------------- | --------- | | `[nzFormat]` | Format of color | `rgb`｜`hex`｜`hsb` | `hex` | | `[nzValue]` | Value of color | `string`｜`NzColor` | - | | `[nzSize]` | Setting the trigger size | `large`｜`default`｜`small` | `default` | | `[nzDefaultValue]` | Default value of color | `string`｜`NzColor` | `false` | | `[nzAllowClear]` | Allow clearing color selected | `boolean` | `false` | | `[nzTrigger]` | ColorPicker trigger mode | `hover`｜`click` | `click` | | `[nzShowText]` | Show color text | `boolean` | `false` | | `[nzOpen]` | Whether to show popups | `boolean` | `false` | | `[nzDisabled]` | Disable ColorPicker | `boolean` | `false` | | `[nzDisabledAlpha]` | Disable Alpha | `boolean` | `false` | | `[nzTitle]` | Setting the title of the color picker | `TemplateRef`｜`string` | - | | `(nzOnChange)` | Callback when value is changed | `EventEmitter<{ color: NzColor; format: string }>` | - | | `(nzOnClear)` | Called when clear | `EventEmitter` | - | | `(nzOnFormatChange)` | Callback when `format` is changed | `EventEmitter<'rgb'｜'hex'｜'hsb'>` | - | | `(nzOnOpenChange)` | Callback for opening the color panel | `EventEmitter` | - | ### nz-color-block | Parameter | Description | Type | Default | | ------------- | -------------------------------------- | --------------------------- | --------- | | `[nzColor]` | Module colors | `string` | `#1677ff` | | `[nzSize]` | Color block size | `large`｜`default`｜`small` | `default` | | `[nzOnClick]` | Callbacks for clicking on color blocks | `EventEmitter` | - | ### NzColor | Parameter | Description | Type | Default | | ------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------- | ------- | | `toHex` | Convert to `hex` format characters, the return type like: `1677ff` | `() => string` | - | | `toHexString` | Convert to `hex` format color string, the return type like: `#1677ff` | `() => string` | - | | `toHsb` | Convert to `hsb` object | `() => ({ h: number, s: number, b: number, a number })` | - | | `toHsbString` | Convert to `hsb` format color string, the return type like: `hsb(215, 91%, 100%)` | `() => string` | - | | `toRgb` | Convert to `rgb` object | `() => ({ r: number, g: number, b: number, a number })` | - | | `toRgbString` | Convert to `rgb` format color string, the return type like: `rgb(22, 119, 255)` | `() => string` | - | --- Title: Collapse URL: https://ng.ant.design/components/collapse/en --- ## When To Use - Can be used to group or hide complex regions to keep the page clean. - `Accordion` is a special kind of `Collapse`, which allows only one panel to be expanded at a time. ## API ### nz-collapse | Property | Description | Type | Default | Global Config | | ------------------------ | ----------------------------------------------------------- | ------------------ | ------- | ------------- | | `[nzAccordion]` | Accordion mode | `boolean` | `false` | ✅ | | `[nzBordered]` | Set border style | `boolean` | `true` | ✅ | | `[nzGhost]` | Make the collapse borderless and its background transparent | `boolean` | `false` | ✅ | | `[nzExpandIconPosition]` | Set expand icon position | `'start' \| 'end'` | `start` | - | ### nz-collapse-panel | Property | Description | Type | Default | Global Config | | ------------------ | ------------------------------------------- | ----------------------------- | ------- | ------------- | | `[nzDisabled]` | If `true`, panel cannot be opened or closed | `boolean` | `false` | - | | `[nzHeader]` | Title of the panel | `string \| TemplateRef` | - | - | | `[nzExpandedIcon]` | Customize an icon for toggle | `string \| TemplateRef` | - | - | | `[nzExtra]` | Extra element in the corner | `string \| TemplateRef` | - | - | | `[nzShowArrow]` | Display arrow or not | `boolean` | `true` | ✅ | | `[nzActive]` | Active status of panel, double binding | `boolean` | - | - | | `(nzActiveChange)` | Callback function of the active status | `EventEmitter` | - | - | --- Title: Comment URL: https://ng.ant.design/components/comment/en --- ## When To Use Comments can be used to enable discussions on an entity such as a page, blog post, issue or other. ## API ### nz-comment | Property | Description | Type | Default | |----------------|--------------------------------------------------------|-------------------------------|---------| | `[nzAuthor]` | The element to display as the comment author | `string \| TemplateRef` | - | | `[nzDatetime]` | A datetime element containing the time to be displayed | `string \| TemplateRef` | - | ### [nz-comment-avatar] The element to display as the comment avatar. ### nz-comment-content The main content of the comment. ### nz-comment-action The element items rendered below the comment content. --- Title: Code Editor URL: https://ng.ant.design/components/code-editor/en --- ## When To Use When you want to use monaco editor in Angular. ### Import Style ```less @import 'node_modules/ng-zorro-antd/code-editor/style/entry.less'; ``` ## API Install `monaco-editor` in your project first: ```sh npm install monaco-editor ``` ### Dynamic Loading If you would like to load monaco dynamically (which means you load resources of monaco editor right before you would like to use it), you will need to register assets of monaco editor itself. You can do that by adding these lines in `angular.json` file: ```diff "assets": [ + { + "glob": "**/*", + "input": "./node_modules/monaco-editor/min/vs", + "output": "/assets/vs/" + } ], ``` If you deploy resources of monaco editor on CDN, you won't need to modify `angular.json`. Instead, you must configure the `assetsRoot` property via `NzConfigService`. For example, you put resources of monaco editor on https://mycdn.com/assets/vs, you should provide `{ assets: 'https://mycdn.com/assets/vs' }`. > If you are going to use static loading (which we will explain in detail at the bottom of this page), you don't need to modify angular.json file. ### Static Loading Sometimes you need to load AMD module dynamically. But since monaco editor's loader patches `window[require]`, you can not use AMD loader like requireJS. In this situation you need to enable static loading. With help of [monaco-editor-webpack-plugin](https://github.com/microsoft/monaco-editor-webpack-plugin) by Microsoft, you can do that in a convenient way. 1. Provide the value of `NZ_CONFIG` in `app.config.ts` and set `useStaticLoading` in the `codeEditor` property to `true`. 2. Create a `webpack.partial.js` file, and config monaco-editor-webpack-loader. 3. Use custom webpack loader like [ngx-build-plus](https://github.com/manfredsteyer/ngx-build-plus) to load this webpack config. If you use static loading, you should not add assets of monaco editor to your project by modifying `angular.json` file. ### nz-code-editor | Parameter | Description | Type | Default | |-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------|----------------------------------------------------|----------| | `[nzEditorMode]` | Mode of monaco editor | `normal`\|`diff` | `normal` | | `[nzLoading]` | Show the loading spin | `boolean` | `false` | | `[nzOriginalText]` | The content of the left editor in `diff` mode | `boolean` | `false` | | `[nzFullControl]` | Enable full control mode. User should manage `TextModel` manually in this mode | `boolean` | `false` | | `[nzEditorOption]` | [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/api/interfaces/monaco.editor.ieditorconstructionoptions.html) | `IEditorConstructionOptions` | `{}` | | `[nzToolkit]` | A placeholder for adding some quick actions | `TemplateRef` | - | | `(nzEditorInitialized)` | The event that a code editor is initialized | `IStandaloneCodeEditor` \| `IStandaloneDiffEditor` | - | #### Methods | Method | Description | |------------|-----------------------------------------| | `layout()` | Force monaco editor to re-render itself | ### Global Configuration You can set the default configuration of the `CodeEditor` component through the `set` method of `NzConfigService`. #### CodeEditorConfig | Parameter | Description | Type | Default | |-----------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------|---------| | `assetsRoot` | Where should the component load resource of monaco editor | `string` \| `SafeUrl` | - | | `defaultEditorOption` | Default options. [Please refer to the doc of monaco editor](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor.IEditorConstructionOptions.html) | `IEditorConstructionOptions` | `{}` | | `onLoad` | The hook invoked when the resource of monaco editor is loaded. At this moment and afterwards the global variable `monaco` is usable (`window.MonacoEnvironment = { globalAPI: true }` is required if monaco-editor's version is greater or equal to 0.22.0) | `() => void` | - | | `onFirstEditorInit` | The hook invoked when the first monaco editor is initialized | `() => void` | - | | `onInit` | The hook invoked every time a monaco editor is initialized | `() => void` | - | | `useStaticLoading` | Load monaco editor statically | `boolean` | `false` | --- Title: Checkbox URL: https://ng.ant.design/components/checkbox/en --- ## When To Use - Used for selecting multiple values from several options. - If you use only one checkbox, it is the same as using Switch to toggle between two states. The difference is that Switch will trigger the state change directly, but Checkbox just marks the state as changed and this needs to be submitted. ## API ### [nz-checkbox] | Property | Description | Type | Default | |---------------------|-----------------------------------------------------------------|-------------------------|---------| | `[nzId]` | input id attribute inside the component | `string` | - | | `[nzName]` | input name attribute inside the component | `string` | - | | `[nzAutoFocus]` | get focus when component mounted | `boolean` | `false` | | `[nzDisabled]` | Disable checkbox | `boolean` | `false` | | `[ngModel]` | Specifies whether the checkbox is selected, double binding | `boolean` | `false` | | `[nzIndeterminate]` | set the status of indeterminate，only affect the style | `boolean` | `false` | | `[nzValue]` | use for the callback of `nz-checkbox-wrapper` | `any` | - | | `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter` | - | ### nz-checkbox-group | Property | Description | Type | Default | |-------------------|-----------------------------------------------------------------|-----------------------------------------------------------------------------|---------| | `[ngModel]` | Specifies options, double binding | `string[] \| number[]` | `[]` | | `[nzName]` | The `name` property of all input children | `string` | - | | `[nzOptions]` | Specifies options | `string[] \| number[] \| NzCheckboxOption[]` | `[]` | | `[nzDisabled]` | Disable all checkboxes | `boolean` | `false` | | `(ngModelChange)` | The callback function that is triggered when the state changes. | `EventEmitter` | - | ### nz-checkbox-wrapper | Property | Description | Type | Default | |----------------|-----------------------------------------------------------------|-----------------------|---------| | `(nzOnChange)` | The callback function that is triggered when the state changes. | `EventEmitter` | - | ## Methods ### [nz-checkbox] | Name | Description | |-----------|--------------| | `focus()` | get focus | | `blur()` | remove focus | ## Interfaces ### NzCheckboxOption ```ts export interface NzCheckboxOption { label: string; value: string | number; disabled?: boolean; } ``` --- Title: CheckList URL: https://ng.ant.design/components/check-list/en --- ## When To Use If the current page business logic is too complex, and with a more mandatory sequential flow control, then you can use this component to help you simplify the process. ## API ### nz-check-list | Property | Description | Type | Default | Global Config | |---------------------|----------------------------------------------------|-------------------------------|---------|---------------| | `[nzItems]` | check list elements | `NzItemProps` | `[]` | - | | `[nzVisible]` | show check-list | `boolean` | `false` | - | | `[nzIndex]` | current index | `number` | `1` | - | | `[nzProgress]` | show progress | `boolean` | `true` | - | | `[nzTriggerRender]` | rendering template for float button | `TemplateRef \| string` | - | - | | `[nzTitle]` | rendering template for the check-list panel title | `TemplateRef \| string` | - | - | | `[nzFooter]` | rendering template for the check-list panel footer | `TemplateRef \| string` | - | - | | `(nzHide)` | callback for hiding the check list | `EventEmitter` | `false` | - | > Value of `(nzHide)` is whether not show the check-list anymore. > If the value is `true`, you can store a data in `LocalStorage` to avoid showing the check-list again. ### Interfaces #### NzItemProps | Property | Description | Type | Default | |---------------|---------------------------------------|--------------|---------| | `key` | unique identifier | `string` | - | | `description` | description content | `string` | - | | `onClick` | method triggered by clicking the step | `() => void` | - | > `key` is the unique identifier of the current item. If not set, `description` will be used as the key. --- Title: Cascader URL: https://ng.ant.design/components/cascader/en --- ## When To Use - When you need to select from a set of a hierarchical structure. Such as province/city/district, company level, and classification. - When selecting from a large data set, with multi-stage classification separated for easy selection. - Chooses cascade items in one float layer for a better user experience. ## API ```html ``` ### nz-cascader | Property | Description | Type | Default | Global Config | |-----------------------|----------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------|-------------------|---------------| | `[ngModel]` | selected value | `any[]` | - | | `[nzAllowClear]` | whether allow clear | `boolean` | `true` | | `[nzAutoFocus]` | whether auto focus the input box | `boolean` | `false` | | `[nzBackdrop]` | whether or not the overlay should attach a backdrop | `boolean` | `false` | | `[nzChangeOn]` | change value on each selection if this function returns `true` | `(option: any, index: number) => boolean` | - | | `[nzChangeOnSelect]` | change value on each selection if set to true, see above demo for details | `boolean` | `false` | | `[nzColumnClassName]` | additional className of column in the popup overlay | `string` | - | | `[nzDisabled]` | whether select should be disabled | `boolean` | `false` | | `[nzExpandIcon]` | customize the current item expand icon | `string\|TemplateRef` | - | | `[nzExpandTrigger]` | expand current item when clicked or hovered, one of 'click' 'hover' | `'click'\|'hover'` | `'click'` | | `[nzLabelProperty]` | the label property name of options | `string` | `'label'` | | `[nzLabelRender]` | render template of displaying selected options | `TemplateRef` | - | | `[nzLoadData]` | to load option lazily. Lazy load will be called immediately if the setting is `ngModel` with an array value and `nzOptions` is not set | `(option: any, index?: index) => PromiseLike \| Observable` | - | | `[nzMenuClassName]` | additional className of popup overlay | `string` | - | | `[nzMouseEnterDelay]` | duration in milliseconds before opening the popup overlay when the mouse enters the trigger | `number` | 150 | | `[nzMouseLeaveDelay]` | duration in milliseconds before closing the popup overlay when the mouse leaves the trigger | `number` | 150 | | `[nzMenuStyle]` | additional css style of popup overlay | `object` | - | | `[nzMultiple]` | support multiple or not | `boolean` | `false` | | `[nzNotFoundContent]` | specify content to show when no result matches | `string\|TemplateRef` | - | | `[nzOptionRender]` | render template of cascader options | `TemplateRef<{ $implicit: NzCascaderOption, index: number }>` | | | `[nzOptions]` | data options of cascade | `object[]` | - | | `[nzPlaceHolder]` | input placeholder | `string` | `'Please select'` | | `[nzPlacement]` | popup placement | `'bottomLeft' \| 'bottomRight' \| 'topLeft' \| 'topRight'` | `'bottomLeft'` | | `[nzShowArrow]` | whether show arrow | `boolean` | `true` | | `[nzShowInput]` | whether show input | `boolean` | `true` | | `[nzShowSearch]` | whether support search. Cannot be used with `[nzLoadData]` at the same time | `boolean\|NzShowSearchOptions` | `false` | | `[nzSize]` | input size, one of `large` `default` `small` | `'large'\|'small'\|'default'` | `'default'` | ✅ | | `[nzStatus]` | set validation status | `'error' \| 'warning'` | - | | `[nzSuffixIcon]` | custom suffix icon | `string\|TemplateRef` | - | | `[nzValueProperty]` | value property name of options | `string` | `'value'` | | `[nzVariant]` | Variants of Cascader | `'outlined' \| 'borderless' \| 'filled' \| 'underlined'` | `outlined` | ✅ | | `(ngModelChange)` | emit on values change | `EventEmitter` | - | | `(nzClear)` | emit on clear values | `EventEmitter` | - | | `(nzVisibleChange)` | emit on popup menu visible or hide | `EventEmitter` | - | | `(nzRemoved)` | emit on selected item removed when `nzMultiple` is `true` | `EventEmitter` | - | | `(nzSelectionChange)` | emit on values change | `EventEmitter` | - | ### Interfaces #### NzCascaderOption ```ts export interface NzCascaderOption { value?: any; label?: string; title?: string; disabled?: boolean; loading?: boolean; isLeaf?: boolean; children?: NzCascaderOption[]; disableCheckbox?: boolean; [key: string]: any; } ``` #### NzShowSearchOptions When `nzShowSearch` is an object it should implement `NzShowSearchOptions`: | Params | Explanation | Type | Default | |----------|------------------------------------------------------------------------|------------------------------------------------------------------------------|---------| | `filter` | Optional. Be aware that all non-leaf CascaderOptions would be filtered | `(inputValue: string, path: NzCascaderOption[]): boolean` | - | | `sorter` | Optional | `(a: NzCascaderOption[], b: NzCascaderOption[], inputValue: string): number` | - | The default filter looks as follows: ```ts const defaultFilter: NzCascaderFilter = (i, p) => { return p.some(o => { const label = o.label; return !!label && label.indexOf(i) !== -1; }); }; ``` For example, if you would like to ignore lower or upper case, you could use a filter function like this: ```ts const filter: NzCascaderFilter = (i, p) => { return p.some(o => { const label = o.label; return !!label && label.toLowerCase().indexOf(i.toLowerCase()) !== -1; }); }; ``` #### Methods | Name | Description | |---------------|---------------| | `blur()` | remove focus | | `focus()` | get focus | | `closeMenu()` | hide the menu | ## FAQ ### Q: An error is thrown when `nzLoadData` is used. When you pass a function to `nzLoadData`, the function becomes a `NzCascaderComponent` property. When the component calls the `nzLoadData` function, `this` is bound to nothing. You have to pass an arrow function or use `Function.bind` to bind `this` to the parent component. [see example](https://stackoverflow.com/questions/60320913/ng-zorro-cascader-lazy-load-data-nzloaddata-function-got-this-undefined/60928983#60928983). --- Title: Carousel URL: https://ng.ant.design/components/carousel/en --- ## When To Use - When there is a group of content on the same level. - When there is insufficient content space, it can be used to save space in the form of a revolving door. - Commonly used for a group of pictures/cards. ## API ### nz-carousel | Property | Description | Type | Default | Global Config | | ------------------- | --------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------- | | `[nzAutoPlay]` | Whether to scroll automatically | `boolean` | `false` | ✅ | | `[nzAutoPlaySpeed]` | Duration (milliseconds), does not scroll when set to 0 | `number` | `3000` | ✅ | | `[nzDotRender]` | Dot render template | `TemplateRef<{ $implicit: number }>` | - | | `[nzDotPosition]` | The position of the dots, which can be one of `top` `bottom` `left` `right` | `string` | `bottom` | ✅ | | `[nzDots]` | Whether to show the dots at the bottom of the gallery | `boolean` | `true` | ✅ | | `[nzEffect]` | Transition effect | `'scrollx'\|'fade'` | `'scrollx'` | ✅ | | `[nzEnableSwipe]` | Whether to support swipe gesture | `boolean` | `true` | ✅ | | `[nzLoop]` | Whether to enable the carousel to go in a loop | `boolean` | `true` | ✅ | | `(nzAfterChange)` | Callback function called after the current index changes | `EventEmitter` | - | | `(nzBeforeChange)` | Callback function called before the current index changes | `EventEmitter{ from: number; to: number }>` | - | #### Methods | Name | Description | | ------------------- | ------------------------------------------ | | `goTo(slideNumber)` | Change current slide to given slide number | | `next()` | Change current slide to next slide | | `pre()` | Change current slide to previous slide | ### InjectionToken | Token | Description | Parameters | Default Value | | ------------------------------- | --------------------------------------- | -------------------------------- | ------------- | | `NZ_CAROUSEL_CUSTOM_STRATEGIES` | Provide custom transitioning strategies | `CarouselStrategyRegistryItem[]` | - | ### Customizing transition effects You can provide strategies that extends `NzCarouselBaseStrategy` to implement custom transition effects. --- Title: Card URL: https://ng.ant.design/components/card/en --- ## When To Use A card can be used to display content related to a single subject. The content can consist of multiple elements of varying types and sizes. ## API ```html card content ``` ### nz-card | Property | Description | Type | Default | Global Config | | --------------- | -------------------------------------------------------------------------- | --------------------------- | ----------- | ------------- | | `[nzActions]` | The action list, shows at the bottom of the Card. | `Array>` | - | | `[nzBodyStyle]` | Inline style to apply to the card content | `{ [key: string]: string }` | - | | `[nzBordered]` | Toggles rendering of the border around the card | `boolean` | `true` | ✅ | | `[nzCover]` | Card cover | `TemplateRef` | - | | `[nzExtra]` | Content to render in the top-right corner of the card | `string\|TemplateRef` | - | | `[nzHoverable]` | Lift up when hovering card | `boolean` | `false` | ✅ | | `[nzLoading]` | Shows a loading indicator while the contents of the card are being fetched | `boolean` | `false` | | `[nzTitle]` | Card title | `string\|TemplateRef` | - | | `[nzType]` | Card style type, can be set to `inner` or not set | `'inner'` | - | | `[nzSize]` | Size of card | `'default'\|'small'` | `'default'` | ✅ | ### nz-card-meta | Property | Description | Type | Default | | ----------------- | ------------------- | --------------------------- | ------- | | `[nzAvatar]` | avatar or icon | `TemplateRef` | - | | `[nzDescription]` | description content | `string\|TemplateRef` | - | | `[nzTitle]` | title content | `string\|TemplateRef` | - | ### [nz-card-grid] | Property | Description | Type | Default | Global Config | | --------------- | -------------------------- | --------- | ------- | ------------- | | `[nzHoverable]` | Lift up when hovering card | `boolean` | `true` | - | Area for grid style card ### nz-card-tab Area for tab card --- Title: Calendar URL: https://ng.ant.design/components/calendar/en --- ## When To Use When data is in the form of dates, such as schedules, timetables, prices calendar, lunar calendar. This component also supports Year/Month switch. ## API **Note:** Some of Calendar's locale are coming from [Angular i18n](https://angular.dev/guide/i18n), that should be provided in the file `app.config.ts`. For example: ```typescript import { registerLocaleData } from '@angular/common'; import en from '@angular/common/locales/en'; registerLocaleData(en); ``` ```html
      Foo
       {{ date | date:'d'}} ``` ### nz-calendar | Property | Description | Type | Default | | ------------------- | -------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ------------ | | `[(ngModel)]` | (Two-way bindable) The current selected date | `Date` | current date | | `[(nzMode)]` | The display mode of the calendar (two-way bindable) | `'month' \| 'year'` | `'month'` | | `[nzFullscreen]` | Whether to display in full-screen | `boolean` | `true` | | `[nzDateCell]` | (Contentable) Customize the display of the date cell, the template content will be appended to the cell | `TemplateRef` | - | | `[nzDateFullCell]` | (Contentable) Customize the display of the date cell, the template content will override the cell | `TemplateRef` | - | | `[nzMonthCell]` | (Contentable) Customize the display of the month cell, the template content will be appended to the cell | `TemplateRef` | - | | `[nzMonthFullCell]` | (Contentable) Customize the display of the month cell, the template content will override the cell | `TemplateRef` | - | | `[nzCustomHeader]` | Render custom header in panel | `string \| TemplateRef` | - | | `[nzDisabledDate]` | specify the date that cannot be selected | `(current: Date) => boolean` | - | | `(nzPanelChange)` | Callback for when panel changes | `EventEmitter<{ date: Date, mode: 'month' \| 'year' }>` | - | | `(nzSelectChange)` | A callback function of selected item | `EventEmitter` | - | --- Title: Button URL: https://ng.ant.design/components/button/en --- ## When To Use A button means an operation (or a series of operations). Clicking a button will trigger corresponding business logic. In Ant Design, we provide 5 types of buttons. - 🔵 Primary button: indicate the main action, one primary button at most in one section. - ⚪️ Default button: indicate a series of actions without priority. - 🫥 Dashed button: used for adding action commonly. - 🔤 Text button: used for the most secondary action. - 🔗 Link button: used for external links. And 4 other properties additionally. - ⚠️ `danger`: used for risk actions, like deletion or authorization. - 👻 `ghost`: usually used in situations with a complex background, home pages. - 🚫 `disabled`: when actions are not available. - 🔃 `loading`: add loading spinner in button, avoiding multiple submit. ## API ### [nz-button] > Note：nz-button is a Directive, it accepts all props which are supported by [native button](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button). To get a customized button, just set `nzType`/`nzShape`/`nzSize`/`nzLoading`/`disabled`. | Property | Description | Type | Default | Global Config | | ------------- | ----------------------------------------------------------------------------- | ------------------------------------- | ----------- | ------------- | | `[disabled]` | prevents a user from interacting with the button | `boolean` | `false` | | `[nzGhost]` | make background transparent and invert text and border colors | `boolean` | `false` | | `[nzLoading]` | set the loading status of button | `boolean` | `false` | | `[nzShape]` | can be set to `circle` `round` or omitted | `'circle'\|'round'` | - | | | `[nzSize]` | can be set to `small` `large` or omitted | `'large'\|'small'\|'default'` | `'default'` | ✅ | | `[nzType]` | can be set to `primary` `dashed` `text` `link` or omitted (meaning `default`) | `'primary'\|'dashed'\|'link'\|'text'` | - | | `[nzBlock]` | option to fit button width to its parent width | `boolean` | `false` | | `[nzDanger]` | set the danger status of button | boolean | `false` | | --- Title: Breadcrumb URL: https://ng.ant.design/components/breadcrumb/en --- ## When To Use - When the system has more than two layers in a hierarchy. - When you need to inform the user of where they are. - When the user may need to navigate back to a higher level. - When the application has multi-layer architecture. ## API ### nz-breadcrumb | Property | Description | Type | Default | |--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|---------------------------------------|------------------| | `[nzSeparator]` | Custom separator | `string \| TemplateRef \| null` | `'/'` | | `[nzAutoGenerate]` | Auto generate breadcrumb | `boolean` | `false` | | `[nzRouteLabel]` | Name of property that determines displayed text in routing config. It should be used when `nzAutoGenerate` is `true` | `string` | `'breadcrumb'` | | `[nzRouteLabelFn]` | Format breadcrumb item label text, normally used in international app to translate i18n key. It should be used when `nzAutoGenerate` is `true` | `(label:string) => string` | `label => label` | | `[nzRouteFn]` | Format breadcrumb item route, normally used in international app to bind current params or query strings to avoid losing them while navigate using breadcrumb. It should be used when `nzAutoGenerate` is `true` | `(route:string) => route` | `route => route` | Using `[nzAutoGenerate]` by configuring `data` like this: ```ts { path: '/path', component: SomeComponent, data: { breadcrumb: 'Display Name' } } ``` For lazy loading modules, you should write `data` in parent module like this: ```ts { path: 'first', loadChildren: () => import('./first/first.module').then(m => m.FirstModule), data: { breadcrumb: 'First' }, } ``` Use `nzRouteLabel` to custom `data` breadcrumb label: ```html ``` ```ts { path: 'path', component: SomeComponent, data: { customBreadcrumb: 'Display Name' } } ``` Use `nzRouteLabelFn` to format breadcrumb label in international application: ```html ``` ```ts // In Route { path: 'path', component: SomeComponent, data: { breadcrumbI18nKey: 'i18n.aaa.bbbb' } } // In component translateFn = (key:string) => this.yourI18nService.translate(key); ``` Use `nzRouteFn` to format or bind params and query strings to the route it self in international application: ```html ``` ```ts // In component bindCurrentParams(params, route) { let newRoute = route; for (const key in params) { if (params.hasOwnProperty(key)) { newRoute += `;${key}=${params[key]}`; } } return newRoute; } const params = this.activatedRoute.snapshot.params; customRoute = (route:string) => this.bindCurrentParams(params,route); ``` --- Title: Badge URL: https://ng.ant.design/components/badge/en --- ## When To Use Badge normally appears in proximity to notifications or user avatars with eye-catching appeal, typically displaying unread messages count. ## API ```html ``` ```html ``` ### nz-badge | Property | Description | Type | Default | Global Config | |---------------------|-------------------------------------------------------------------------------------------|------------------------------------------------------------------|-----------|---------------| | `[nzStandalone]` | Whether standalone mode | `boolean` | - | - | | `[nzColor]` | Customize Badge dot color | string | - | ✅ | | `[nzCount]` | Number to show in badge | `number \| TemplateRef` | - | | `[nzDot]` | Whether to display a red dot instead of `count` | `boolean` | `false` | | `[nzShowDot]` | Whether to display the red dot | `boolean` | `true` | | `[nzOverflowCount]` | Max count to show | `number` | `99` | ✅ | | `[nzShowZero]` | Whether to show badge when `count` is zero | `boolean` | `false` | | `[nzSize]` | If `nzCount` is set, `size` sets the size of badge | `default \| small` | `default` | | `[nzStatus]` | Set `nz-badge` as a status dot | `'success' \| 'processing' \| 'default' \| 'error' \| 'warning'` | - | | `[nzText]` | If `nzStatus` is set, `text` sets the display text of the status `dot` | `string \| TemplateRef` | - | | `[nzTitle]` | Text to show when hovering over the badge（Only Non-standalone), hide when value is `null` | `string \| null` | `nzCount` | | `[nzOffset]` | set offset of the badge dot, like `[x, y]` (Only Non-standalone) | `[number, number]` | - | ### nz-ribbon | Property | Description | Type | Default | |-----------------|-----------------------------|-------------------------------|---------| | `[nzColor]` | Customize Ribbon color | `string` | - | | `[nzPlacement]` | The placement of the Ribbon | `start` \| `end` | `end` | | `[nzText]` | Content inside the Ribbon | `string \| TemplateRef` | - | | --- Title: BackTop URL: https://ng.ant.design/components/back-top/en --- > ⚠️ **Note**: This component will be removed in v21, please use `` in [FloatButton](/components/float-button/en) instead. `nz-back-top` makes it easy to go back to the top of the page. ## When To Use - When the page content is very long. - When you need to go back to the top very frequently in order to view the contents. ## API ### nz-back-top > The distance to the bottom is set to `50px` by default, which is overridable. > If you decide to use custom styles, please note the size limit: no more than `40px * 40px`. | Property | Description | Type | Default | Global Config | | ---------------------- | --------------------------------------------------------------------------------- | ----------------------- | -------- | ------------- | | `[nzTemplate]` | custom content | `TemplateRef` | - | | `[nzVisibilityHeight]` | the `nz-back-top` button will not show until the scroll height reaches this value | `number` | `400` | ✅ | | `[nzTarget]` | specifies the scrollable area dom node | `string \| Element` | `window` | | `[nzDuration]` | Time to return to top (ms) | `number` | `450` | | `(nzClick)` | a callback function, which can be executed when you click the button | `EventEmitter` | - | --- Title: Avatar URL: https://ng.ant.design/components/avatar/en --- ## API ### nz-avatar | Property | Description | Type | Default | Global Config | | ------------------- | -------------------------------------------------------------------------------------------------- | ------------------------------------------- | ----------- | ------------- | | `[nzIcon]` | The `Icon` type for an icon avatar, see `Icon` | `string` | - | | `[nzShape]` | The shape of avatar | `'circle' \| 'square'` | `'circle'` | ✅ | | `[nzSize]` | The size of the avatar | `'large' \| 'small' \| 'default' \| number` | `'default'` | ✅ | | `[nzGap]` | Letter type unit distance between left and right sides | `number` | `4` | ✅ | | `[nzSrc]` | Avatar image URL | `string` | - | | `[nzSrcSet]` | a list of sources to use for different screen resolutions | `string` | - | | `[nzAlt]` | This attribute defines the alternative text describing the image | `string` | - | | `[nzText]` | Letter type avatar | `string` | - | | `[nzLoading]` | Sets the native [`loading`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#loading) attribute on the avatar image element | `'eager' \| 'lazy'` | `'eager'` | | | `[nzFetchPriority]` | Sets the native [`fetchpriority`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#fetchpriority) attribute on the avatar image element | `'high' \| 'low' \| 'auto'` | `'auto'` | | | `(nzError)` | Handler when img load error, call the `preventDefault` method to prevent default fallback behavior | `EventEmitter` | - | ### nz-avatar-group ```html ``` --- Title: Autocomplete URL: https://ng.ant.design/components/auto-complete/en --- ## When To Use When there is a need for autocomplete functionality. ## API ```html ``` ```html 12345 23456 34567 ``` ### [nzAutocomplete] | Property | Description | Type | Default | | ------------------ | ---------------------------------------- | ------------------------- | ------- | | `[nzAutocomplete]` | used to bind `nzAutocomplete` components | `NzAutocompleteComponent` | - | ### nz-autocomplete | Property | Description | Type | Default | | ------------------------------ | ---------------------------------------------------------------------------------------------- | ------------------------------- | ------------------------------- | | `[nzBackfill]` | backfill selected item the input when using keyboard | `boolean` | `false` | | `[nzDataSource]` | Data source for autocomplete | `AutocompleteDataSource` | - | | `[nzDefaultActiveFirstOption]` | Whether active first option by default | `boolean` | `true` | | `[nzWidth]` | Custom width, unit px | `number` | trigger element width | | `[nzOverlayClassName]` | Class name of the dropdown root element | `string` | - | | `[nzOverlayStyle]` | Style of the dropdown root element | `object` | - | | `[compareWith]` | Same as [SelectControlValueAccessor](https://angular.dev/api/forms/SelectControlValueAccessor) | `(o1: any, o2: any) => boolean` | `(o1: any, o2: any) => o1===o2` | ### nz-auto-option | Property | Description | Type | Default | | -------------- | ------------------------------------ | --------- | ------- | | `[nzValue]` | bind ngModel of the trigger element | `any` | - | | `[nzLabel]` | display value of the trigger element | `string` | - | | `[nzDisabled]` | disabled option | `boolean` | `false` | --- Title: Anchor URL: https://ng.ant.design/components/anchor/en --- ## When To Use For displaying anchor hyperlinks on page and jumping between them. ## API ### nz-anchor | Property | Description | Type | Default | Global Config | |----------------------|--------------------------------------------------------------------|---------------------------------------|--------------|---------------| | `[nzAffix]` | Fixed mode of Anchor | `boolean` | `true` | | `[nzBounds]` | Bounding distance of anchor area, unit: px | `number` | `5` | ✅ | | `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | ✅ | | `[nzShowInkInFixed]` | Whether show ink-balls in fixed mode | `boolean` | `false` | ✅ | | `[nzTargetOffset]` | Anchor scroll offset, default as `offsetTop` | `number` | - | | | `[nzContainer]` | Scrolling container | `string \| HTMLElement` | `window` | | `[nzCurrentAnchor]` | Customize the anchor highlight | `string` | - | | | `[nzDirection]` | Set Anchor direction | `'vertical' \| 'horizontal'` | `'vertical'` | | | `(nzClick)` | Click of Anchor item | `EventEmitter` | - | | `(nzChange)` | Listening for anchor link change | `EventEmitter` | - | | | `(nzScroll)` | The scroll function that is triggered when scrolling to an anchor. | `EventEmitter` | - | ### nz-link | Property | Description | Type | |--------------|-------------------------------------------|-------------------------------| | `[nzHref]` | target of hyperlink | `string` | | `[nzTarget]` | Specifies where to display the linked URL | `string` | | `[nzTitle]` | content of hyperlink | `string \| TemplateRef` | --- Title: Alert URL: https://ng.ant.design/components/alert/en --- ## When To Use - When you need to show alert messages to users. - When you need a persistent static container which is closable by user actions. ## API ### nz-alert | Property | Description | Type | Default | Global Config | | ----------------- | --------------------------------------------------------------- | --------------------------------------------- | -------- | ------------- | | `[nzBanner]` | Whether to show as banner | `boolean` | `false` | | `[nzAction]` | Customized alert's action | `string \| TemplateRef` | - | | `[nzCloseable]` | Whether Alert can be closed | `boolean` | - | ✅ | | `[nzCloseText]` | Close text to show | `string \| TemplateRef` | - | | `[nzDescription]` | Additional content of Alert | `string \| TemplateRef` | - | | `[nzMessage]` | Content of Alert | `string \| TemplateRef` | - | | `[nzShowIcon]` | Whether to show icon, in `nzBanner` mode default is `true` | `boolean` | `false` | ✅ | | `[nzIconType]` | Icon type, effective when `nzShowIcon` is `true` | `string` | - | | `[nzType]` | Type of Alert styles, in `nzBanner` mode default is `'warning'` | `'success' \| 'info' \| 'warning' \| 'error'` | `'info'` | | `[nzIcon]` | Custom icon, effective when showIcon is true | `string \| TemplateRef` | - | | `(nzOnClose)` | Callback when Alert is closed | `EventEmitter` | - | --- Title: Affix URL: https://ng.ant.design/components/affix/en --- ## When To Use When user browses a long web page, some content need to stick to the viewport. This is common for menus and actions. Please note that Affix should not cover other content on the page, especially when the size of the viewport is small. ## API ### nz-affix | Property | Description | Type | Default | Global Config | | ------------------ | ---------------------------------------------------------------- | ----------------------- | -------- | ------------- | | `[nzOffsetBottom]` | Pixels to offset from bottom when calculating position of scroll | `number` | - | ✅ | | `[nzOffsetTop]` | Pixels to offset from top when calculating position of scroll | `number` | `0` | ✅ | | `[nzTarget]` | specifies the scrollable area dom node | `string \| HTMLElement` | `window` | | `(nzChange)` | Callback for when affix state is changed | `EventEmitter` | - | **Note:** Children of `nz-affix` can not be `position: absolute`, but you can set `nz-affix` as `position: absolute`: ```html ... ```
    Name Age Address Action
    {{data.name}} {{data.age}} {{data.address}} Action 一 {{data.name}} Delete