or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

core.mddata-display.mddata-entry.mdfeedback.mdindex.mdlayout.mdnavigation.md
tile.json

tessl/npm-ng-zorro-antd

An enterprise-class Angular UI component library based on Ant Design with 70+ high-quality components for building modern Angular applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/ng-zorro-antd@20.2.x

To install, run

npx @tessl/cli install tessl/npm-ng-zorro-antd@20.2.0

index.mddocs/

NG-ZORRO

NG-ZORRO is an enterprise-class Angular UI component library built on Ant Design principles, providing 70+ high-quality, TypeScript-written components for building modern Angular applications. It offers comprehensive UI building blocks including form controls, data display components, navigation elements, feedback components, and layout utilities with extensive theming capabilities, internationalization support, and high-performance OnPush mode compatibility.

Package Information

  • Package Name: ng-zorro-antd
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install ng-zorro-antd
  • Angular Version: Requires Angular 20.0.0+

Core Imports

import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzFormModule } from 'ng-zorro-antd/form';

For CSS styling, import the desired theme:

// In styles.css or angular.json
@import 'ng-zorro-antd/ng-zorro-antd.min.css'; // Default theme
@import 'ng-zorro-antd/ng-zorro-antd.dark.min.css'; // Dark theme
@import 'ng-zorro-antd/ng-zorro-antd.compact.min.css'; // Compact theme

Basic Usage

import { Component } from '@angular/core';
import { NzButtonModule } from 'ng-zorro-antd/button';
import { NzTableModule } from 'ng-zorro-antd/table';
import { NzMessageService } from 'ng-zorro-antd/message';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [NzButtonModule, NzTableModule],
  template: `
    <button nz-button nzType="primary" (click)="showMessage()">
      Click Me
    </button>
    <nz-table [nzData]="data" [nzColumns]="columns">
      <thead>
        <tr>
          <th>Name</th>
          <th>Age</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let person of data">
          <td>{{ person.name }}</td>
          <td>{{ person.age }}</td>
        </tr>
      </tbody>
    </nz-table>
  `
})
export class ExampleComponent {
  data = [
    { name: 'John', age: 30 },
    { name: 'Jane', age: 25 }
  ];

  constructor(private message: NzMessageService) {}

  showMessage(): void {
    this.message.success('Button clicked!');
  }
}

Architecture

NG-ZORRO is built around several key architectural principles:

  • Component-Based: Each UI element is a standalone Angular component with its own module
  • Theme System: Built-in themes (default, dark, compact, aliyun, variable) with CSS custom properties
  • Internationalization: Support for 70+ languages with complete localization
  • OnPush Optimization: All components support OnPush change detection for maximum performance
  • Tree Shaking: Individual component imports for optimal bundle sizes
  • Accessibility: WCAG compliance with keyboard navigation and screen reader support
  • Angular Integration: Full reactive forms support and Angular best practices

Capabilities

Data Entry Components

Form controls and input components for collecting user data. Includes buttons, inputs, selects, date pickers, and specialized form elements.

// Button Component
interface NzButtonComponent {
  nzType: 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
  nzShape: 'circle' | 'round' | null;
  nzSize: 'large' | 'default' | 'small';
  nzLoading: boolean;
  nzGhost: boolean;
  nzBlock: boolean;
  nzDanger: boolean;
}

// Input Component
interface NzInputDirective {
  nzSize: 'large' | 'default' | 'small';
  nzStatus: 'error' | 'warning' | 'success' | 'validating' | '';
  nzBorderless: boolean;
  disabled: boolean;
}

Data Entry Components

Data Display Components

Components for presenting and organizing data. Includes tables, lists, cards, tags, and data visualization elements.

// Table Component
interface NzTableComponent<T = any> {
  nzData: readonly T[];
  nzColumns: NzTableColumn[];
  nzPageSize: number;
  nzPageIndex: number;
  nzTotal: number;
  nzLoading: boolean;
  nzScroll: { x?: string | null; y?: string | null };
  nzSize: 'middle' | 'default' | 'small';
}

// List Component
interface NzListComponent {
  nzDataSource: any[];
  nzItemLayout: 'horizontal' | 'vertical';
  nzLoading: boolean;
  nzSize: 'large' | 'default' | 'small';
  nzSplit: boolean;
}

Data Display Components

Navigation Components

Components for application navigation and wayfinding. Includes menus, breadcrumbs, pagination, and navigation elements.

// Menu Component
interface NzMenuDirective {
  nzMode: 'vertical' | 'horizontal' | 'inline';
  nzTheme: 'light' | 'dark';
  nzInlineCollapsed: boolean;
  nzSelectable: boolean;
}

// Pagination Component
interface NzPaginationComponent {
  nzTotal: number;
  nzPageIndex: number;
  nzPageSize: number;
  nzPageSizeOptions: number[];
  nzShowSizeChanger: boolean;
  nzShowQuickJumper: boolean;
}

Navigation Components

Feedback Components

Components for providing user feedback and system status. Includes modals, messages, notifications, and progress indicators.

// Modal Service
interface NzModalService {
  create<T>(config: NzModalOptions<T>): NzModalRef<T>;
  confirm(options: NzModalConfirmOptions): NzModalRef;
  info(options: NzModalOptions): NzModalRef;
  success(options: NzModalOptions): NzModalRef;
  error(options: NzModalOptions): NzModalRef;
  warning(options: NzModalOptions): NzModalRef;
}

// Message Service
interface NzMessageService {
  success(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
  error(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
  info(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
  warning(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
  loading(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
}

Feedback Components

Layout & Utility Components

Layout components and utilities for structuring applications. Includes grid system, layout containers, dividers, and spacing utilities.

// Grid System
interface NzRowDirective {
  nzGutter: number | object | [number, number];
  nzType: 'flex';
  nzAlign: 'top' | 'middle' | 'bottom' | 'stretch';
  nzJustify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
}

interface NzColDirective {
  nzSpan: number;
  nzOffset: number;
  nzPush: number;
  nzPull: number;
  nzOrder: number;
  nzXs: number | object;
  nzSm: number | object;
  nzMd: number | object;
  nzLg: number | object;
  nzXl: number | object;
  nzXXl: number | object;
}

Layout & Utility Components

Core Services & Configuration

Core services for global configuration, internationalization, and application-wide functionality.

// Configuration Service
interface NzConfigService {
  getConfig(): NzConfig;
  getConfigForComponent<T extends NzConfigKey>(componentName: T): NzConfig[T];
  set<T extends NzConfigKey>(componentName: T, value: NzConfig[T]): void;
}

// Internationalization Service
interface NzI18nService {
  setLocale(locale: NzI18nInterface): void;
  getLocale(): NzI18nInterface;
  getLocaleId(): string;
  setDateLocale(dateLocale: any): void;
  getDateLocale(): any;
}

Core Services & Configuration

Types

// Common Size Types
type NzSizeLDSType = 'large' | 'default' | 'small';
type NzSizeMDSType = 'middle' | 'default' | 'small';
type NzSizeLMSType = 'large' | 'middle' | 'small';
type NzSizeDSType = 'default' | 'small';
type NzSizeType = 'large' | 'middle' | 'small' | 'default';

// Input Variant Types
type NzVariant = 'outlined' | 'borderless' | 'filled' | 'underlined';

// Direction and Status Types
type Direction = 'ltr' | 'rtl';
type NzStatus = '' | 'error' | 'warning';
type NzValidateStatus = '' | 'success' | 'warning' | 'error' | 'validating';

// Theme Types
type NzTheme = 'light' | 'dark';

// Component Export Pattern
interface ComponentModule {
  forRoot(): ModuleWithProviders<ComponentModule>;
}