ng-zorro-antd
Advanced tools
An enterprise-class Angular UI component library based on Ant Design.
English | 简体中文
^19.0.0  Edge |  Firefox |  Chrome |  Safari |  Opera |  Electron |
|---|---|---|---|---|---|
| last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |
ng-zorro-antd synchronizes design specification with Ant Design on a regular basis, you can check the log online.
We recommend using @angular/cli to install. It not only makes development easier, but also allows you to take advantage of the rich ecosystem of angular packages and tooling.
$ ng new PROJECT_NAME
$ cd PROJECT_NAME
$ ng add ng-zorro-antd
More information about
@angular/clihere.
You can also install ng-zorro-antd with npm or yarn
$ npm install ng-zorro-antd
Import the component modules you want to use into your app.module.ts file and feature modules.
import { NzButtonModule } from 'ng-zorro-antd/button';
@NgModule({
imports: [ NzButtonModule ]
})
export class AppModule {
}
@angular/cliusers won't have to worry about the things below but it's good to know.
And import style and SVG icon assets file link in angular.json.
{
"assets": [
+ {
+ "glob": "**/*",
+ "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
+ "output": "/assets/"
+ }
],
"styles": [
+ "node_modules/ng-zorro-antd/ng-zorro-antd.min.css"
]
}
See Getting Started for more details.
$ git clone git@github.com:NG-ZORRO/ng-zorro-antd.git
$ cd ng-zorro-antd
$ npm install
$ npm run start
Browser would open automatically.
We welcome all contributions. Please read our CONTRIBUTING.md first. You can submit any ideas as pull requests or as GitHub issues.
If you're new to posting issues, we ask that you read How To Ask Questions The Smart Way (This guide does not provide actual support services for this project!), How to Ask a Question in Open Source Community and How to Report Bugs Effectively prior to posting. Well written bug reports help us help you!
Thanks to JetBrains for supporting us free open source licenses.
For questions on how to use ng-zorro-antd, please post questions to 
using the ng-zorro-antd tag. If you're not finding what you need on stackoverflow, you can find us on
As always, we encourage experienced users to help those who are not familiar with ng-zorro-antd!
We list some users here, if your company or product uses NG-ZORRO, let us know here!
Love ng-zorro-antd? Give our repo a star :star: :arrow_up:.
19.0.1 (2025-01-03)
nzFormat (#8744) (1b7ab5a)zh_TW (#8950) (9607e11)NG0600 error (#8955) (8d6135e)nzBorderless input (#8741) (22ce17c)vi_VN (#8894) (f08ad1c)nzTreeNodePadding not works in virtual scroll (#8920) (82b660a)ngClass and ngStyle (#8895) (c3ab3ba)FADE_CLASS_NAME_MAP and IMAGE_PREVIEW_MASK_CLASS_NAME (#8912) (65223d9)CheckBox to Checkbox (#8934) (c76433d5)nzPlacement (#8935) (6fbd22c)nz-checkbox-group component (#8932) (489e0de)nzVariant option (#8827) (2c63c87)nz-icon tag selector (#8778) (1406241)nzTriggerSubMenuAction to support click trigger for submenu (#8461) (860df87)nzStatusRender to support customize state rendering (#8714) (6f36d75)nzSortDirections to global config (#6613) (#8721) (eb1fdc5)nzOneWay to support one way style (#8717) (99fd4de)All
nzClass / nzStyle input properties no longer support the following features:
Set(): use arrays instead@WithConfig to standard decorator. If you're using @WithConfig in your library, please turn experimentalDecorators off in tsconfig.json[nz-icon] to nz-icon tag. If you're using [nz-icon] selector in stylesheet to select icon inside zorro component, please use nz-icon insteadinput-number: Redesign the input-number so that it will be much simpler and more flexible.
Now you can use affixes or addons as follows, no need for ng-template and nz-input-number-group:
<!-- Custom handler icons -->
<nz-input-number>
<nz-icon nzInputNumberUpIcon />
<nz-icon nzInputNumberDownIcon />
</nz-input-number>
<!-- With affixes -->
<nz-input-number>
<span nzInputPrefix>Prefix</span>
<span nzInputSuffix>Suffix</span>
</nz-input-number>
<!-- With addons -->
<nz-input-number>
<span nzInputAddonBefore>Before</span>
<span nzInputAddonAfter>After</span>
</nz-input-number>
The old input-number component is marked as deprecated, and its entrypoint had changed to ng-zorro-antd/input-number-legacy.
NzInputNumberComponent is now NzInputNumberLegacyComponent, and NzInputNumberModule is now NzInputNumberLegacyModule.
Don't worry, ng update ng-zorro-antd will automatically do the migration.
cascader: Cancel support for writing value with NzCascaderOption[] type.
In the past, the cascader component kept a trick that if you wrote value with NzCascaderOption[] type, it extracted value by mapping each item to its value property, for example:
@Component({
template: `<nz-cascader [nzOptions]="options" [ngModel]="value"></nz-cascader>`
})
export class ExampleComponent {
value = [{ label: 'NG ZORRO', value: 'ng-zorro-antd' }]
}
then the value of cascader would be 'ng-zorro-antd'.
It's strange that the input and output values don't match when we haven't changed the values, and it's hard to maintain. We expect that the value passed in should be the value in the list of options.
In v19, this trick is removed and if you're already using this trick in your code, please consider the add a map function to pass the actual value.
checkbox Redesign the checkbox group component.
NzCheckBoxOptionInterface['checked] field. By the way, NzCheckBoxOptionInterface is marked as deprecated, use NzCheckboxOption insteadnz-checkbox-group: Type of ngModel is changed from NzCheckBoxOptionInterface[] to NzCheckboxOption['value'][]card: Remove redundant nzBorderless input property. Use nzBordered instead.
image: Remove deprecated FADE_CLASS_NAME_MAP and IMAGE_PREVIEW_MASK_CLASS_NAME
pipes: Remove deprecated NzSafeNullPipe
segmented: Redesign the segmented component.
ngModel is changed from index to option's valuenzValueChange from number to option's value type (string | number)nzLabelTemplate, use nz-segmented-item directive insteadspace: Rename exportAs of NzSpaceComponent from NzSpace to standard nzSpace
transfer: Rename nzTreeCheckBoxChange to nzTreeCheckboxChange
tree,tree-select: Rename nzCheckBoxChange to nzCheckboxChange
The following APIs are marked as deprecated in v19 and will be removed in the next major version. Please refer to related documentation for better alternatives.
| Module | API |
|-------------------------------------|----------------------------------------------------------|
| ng-zorro-antd/button | NzButtonGroupComponent |
| ng-zorro-antd/core/form | NzFormPatchModule |
| ng-zorro-antd/checkbox | NzCheckboxWrapperComponent |
| ng-zorro-antd/input | NzInputGroupComponent#nzCompact |
| ng-zorro-antd/input-number-legacy | * |
| ng-zorro-antd/message | NzMessageModule |
| ng-zorro-antd/notification | NzNotificationModule<br/>NzNotificationServiceModule |
FAQs
An enterprise-class UI components based on Ant Design and Angular
The npm package ng-zorro-antd receives a total of 45,592 weekly downloads. As such, ng-zorro-antd popularity was classified as popular.
We found that ng-zorro-antd demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.
Product
Socket now supports uv.lock files to ensure consistent, secure dependency resolution for Python projects and enhance supply chain security.
Research
Security News
Socket researchers have discovered multiple malicious npm packages targeting Solana private keys, abusing Gmail to exfiltrate the data and drain Solana wallets.