NG-ZORRO

Language: JavaScript

UI Framework

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.

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.

Installation

npm: npm install ng-zorro-antd

yarn: yarn add ng-zorro-antd

peer_dependencies: Angular >= 14, RxJS >= 7

manual: Install via npm/yarn and import required modules into your Angular application.

Usage

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.

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.

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.

Error Handling

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.

Official Docs Github