Skip to content

NG-ZORRO

UI & GraphicsUI FrameworkJavaScript
Official docs ↗GitHub ↗

What it is

NG-ZORRO is an Angular UI component library based on Ant Design. It provides a wide range of high-quality, accessible, and enterprise-ready UI components specifically for Angular applications.

NG-ZORRO provides Angular components for forms, navigation, data display, feedback, layout, and more. Each component is an Angular module that can be imported individually for optimized bundle sizes.

Installation

npm install ng-zorro-antd

Getting started

The smallest useful thing you can do with it, and what each part means.

Button usage
import { NzButtonModule } from 'ng-zorro-antd/button';

@NgModule({
  imports: [NzButtonModule]
})
export class AppModule {}

<button nz-button nzType="primary">Primary Button</button>
Imports the `NzButtonModule` and uses a primary Ant Design button in Angular.
Input field
import { NzInputModule } from 'ng-zorro-antd/input';

<ng-container>
  <input nz-input placeholder="Enter text" />
</ng-container>
Uses the NG-ZORRO input component for styled input fields.

Advanced usage

Where the library earns its place over a simpler alternative.

Modal component
import { NzModalService } from 'ng-zorro-antd/modal';

constructor(private modal: NzModalService) {}

showModal(): void {
  this.modal.create({
    nzTitle: 'Modal Title',
    nzContent: 'This is the modal content',
    nzFooter: null
  });
}
Creates and displays a modal dialog using NG-ZORRO’s modal service.
Table component
<nz-table #basicTable [nzBordered]="true" [nzData]="listOfData" [nzBordered]="true">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let data of basicTable.data">
      <td>{{data.name}}</td>
      <td>{{data.age}}</td>
      <td>{{data.address}}</td>
    </tr>
  </tbody>
</nz-table>
Implements a basic data table using NG-ZORRO’s table component.
Form validation
<form nz-form [formGroup]="validateForm">
  <nz-form-item>
    <nz-form-label [nzSpan]="4">Username</nz-form-label>
    <nz-form-control [nzSpan]="8" nzErrorTip="Please input your username">
      <input nz-input formControlName="userName" />
    </nz-form-control>
  </nz-form-item>
</form>
Demonstrates a form with validation using NG-ZORRO’s form components.

Errors and fixes

The failures you are most likely to hit, and what actually resolves them.

Component styles not applied
Ensure you import the NG-ZORRO stylesheet in `angular.json` under `styles`.
Animations not working
Import `BrowserAnimationsModule` from `@angular/platform-browser/animations` in your AppModule.
Module not found
Verify that the module is imported from `ng-zorro-antd` and added to your NgModule imports.

Best practices

  • Import only the modules you need to reduce bundle size.
  • Use Angular reactive forms for NG-ZORRO form components for better validation and control.
  • Leverage built-in themes and customizable style variables for consistent UI.
  • Enable animations using Angular’s BrowserAnimationsModule for full experience.
  • Follow accessibility guidelines, as NG-ZORRO components are designed to be accessible by default.

Background

Why it exists, and what it was reacting to.

NG-ZORRO was created to bring Ant Design’s comprehensive UI component system to Angular developers. It ensures consistency in design and behavior while leveraging Angular’s reactive and modular architecture. The library is widely used in enterprise applications in China and globally for Angular projects.

Related libraries

Others in UI & Graphics for JavaScript.

← All JavaScript librariesJavaScript guide