ng-zorro-antd
Advanced tools
ng-zorro-antd is a UI component library for Angular applications, based on the Ant Design system. It provides a wide range of high-quality, customizable components that follow the Ant Design guidelines, making it easier to build consistent and visually appealing user interfaces.
Button
The Button component is used to trigger actions or events. It supports different types, sizes, and states.
<button nz-button nzType="primary">Primary Button</button>Table
The Table component is used to display data in a tabular format. It supports features like sorting, pagination, and filtering.
<nz-table [nzData]="dataSet" [nzColumns]="columns"></nz-table>Form
The Form component is used to create and manage forms. It supports validation, layout, and various input types.
<form nz-form [formGroup]="validateForm" (ngSubmit)="submitForm()"><nz-form-item><nz-form-label [nzSpan]="4" nzFor="userName">Username</nz-form-label><nz-form-control [nzSpan]="8"><input nz-input formControlName="userName" id="userName" /></nz-form-control></nz-form-item></form>Modal
The Modal component is used to display content in a layer above the current page. It supports various configurations like title, footer, and actions.
<button nz-button (click)="isVisible = true">Show Modal</button><nz-modal [(nzVisible)]="isVisible" nzTitle="Modal Title" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"><p>Modal Content</p></nz-modal>Notification
The Notification component is used to display messages to the user. It supports different types of notifications like success, error, and info.
this.notification.blank('Notification Title', 'This is the content of the notification.');PrimeNG is a collection of rich UI components for Angular. It offers a wide range of components similar to ng-zorro-antd, but with a different design philosophy and additional features like charts and drag-and-drop.
Angular Material is a UI component library for Angular based on Google's Material Design. It provides a set of reusable, well-tested, and accessible UI components, but with a different design language compared to ng-zorro-antd.
ngx-bootstrap provides Bootstrap components powered by Angular. It offers a different set of components and styling compared to ng-zorro-antd, focusing on Bootstrap's design system.
An enterprise-class Angular UI component library based on Ant Design.
English | 简体中文
^15.0.0  IE / Edge |  Firefox |  Chrome |  Safari |  Opera |  Electron |
|---|---|---|---|---|---|
| Edge | 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:.
FAQs
An enterprise-class UI components based on Ant Design and Angular
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
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.