0
# NG-ZORRO
1

2
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.
3

4
## Package Information
5

6
- **Package Name**: ng-zorro-antd
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install ng-zorro-antd`
10
- **Angular Version**: Requires Angular 20.0.0+
11

12
## Core Imports
13

14
```typescript
15
import { NzButtonModule } from 'ng-zorro-antd/button';
16
import { NzTableModule } from 'ng-zorro-antd/table';
17
import { NzFormModule } from 'ng-zorro-antd/form';
18
```
19

20
For CSS styling, import the desired theme:
21

22
```typescript
23
// In styles.css or angular.json
24
@import 'ng-zorro-antd/ng-zorro-antd.min.css'; // Default theme
25
@import 'ng-zorro-antd/ng-zorro-antd.dark.min.css'; // Dark theme
26
@import 'ng-zorro-antd/ng-zorro-antd.compact.min.css'; // Compact theme
27
```
28

29
## Basic Usage
30

31
```typescript
32
import { Component } from '@angular/core';
33
import { NzButtonModule } from 'ng-zorro-antd/button';
34
import { NzTableModule } from 'ng-zorro-antd/table';
35
import { NzMessageService } from 'ng-zorro-antd/message';
36

37
@Component({
38
  selector: 'app-example',
39
  standalone: true,
40
  imports: [NzButtonModule, NzTableModule],
41
  template: `
42
    <button nz-button nzType="primary" (click)="showMessage()">
43
      Click Me
44
    </button>
45
    <nz-table [nzData]="data" [nzColumns]="columns">
46
      <thead>
47
        <tr>
48
          <th>Name</th>
49
          <th>Age</th>
50
        </tr>
51
      </thead>
52
      <tbody>
53
        <tr *ngFor="let person of data">
54
          <td>{{ person.name }}</td>
55
          <td>{{ person.age }}</td>
56
        </tr>
57
      </tbody>
58
    </nz-table>
59
  `
60
})
61
export class ExampleComponent {
62
  data = [
63
    { name: 'John', age: 30 },
64
    { name: 'Jane', age: 25 }
65
  ];
66

67
  constructor(private message: NzMessageService) {}
68

69
  showMessage(): void {
70
    this.message.success('Button clicked!');
71
  }
72
}
73
```
74

75
## Architecture
76

77
NG-ZORRO is built around several key architectural principles:
78

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

87
## Capabilities
88

89
### Data Entry Components
90

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

93
```typescript { .api }
94
// Button Component
95
interface NzButtonComponent {
96
  nzType: 'primary' | 'default' | 'dashed' | 'link' | 'text' | null;
97
  nzShape: 'circle' | 'round' | null;
98
  nzSize: 'large' | 'default' | 'small';
99
  nzLoading: boolean;
100
  nzGhost: boolean;
101
  nzBlock: boolean;
102
  nzDanger: boolean;
103
}
104

105
// Input Component
106
interface NzInputDirective {
107
  nzSize: 'large' | 'default' | 'small';
108
  nzStatus: 'error' | 'warning' | 'success' | 'validating' | '';
109
  nzBorderless: boolean;
110
  disabled: boolean;
111
}
112
```
113

114
[Data Entry Components](./data-entry.md)
115

116
### Data Display Components
117

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

120
```typescript { .api }
121
// Table Component
122
interface NzTableComponent<T = any> {
123
  nzData: readonly T[];
124
  nzColumns: NzTableColumn[];
125
  nzPageSize: number;
126
  nzPageIndex: number;
127
  nzTotal: number;
128
  nzLoading: boolean;
129
  nzScroll: { x?: string | null; y?: string | null };
130
  nzSize: 'middle' | 'default' | 'small';
131
}
132

133
// List Component
134
interface NzListComponent {
135
  nzDataSource: any[];
136
  nzItemLayout: 'horizontal' | 'vertical';
137
  nzLoading: boolean;
138
  nzSize: 'large' | 'default' | 'small';
139
  nzSplit: boolean;
140
}
141
```
142

143
[Data Display Components](./data-display.md)
144

145
### Navigation Components
146

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

149
```typescript { .api }
150
// Menu Component
151
interface NzMenuDirective {
152
  nzMode: 'vertical' | 'horizontal' | 'inline';
153
  nzTheme: 'light' | 'dark';
154
  nzInlineCollapsed: boolean;
155
  nzSelectable: boolean;
156
}
157

158
// Pagination Component
159
interface NzPaginationComponent {
160
  nzTotal: number;
161
  nzPageIndex: number;
162
  nzPageSize: number;
163
  nzPageSizeOptions: number[];
164
  nzShowSizeChanger: boolean;
165
  nzShowQuickJumper: boolean;
166
}
167
```
168

169
[Navigation Components](./navigation.md)
170

171
### Feedback Components
172

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

175
```typescript { .api }
176
// Modal Service
177
interface NzModalService {
178
  create<T>(config: NzModalOptions<T>): NzModalRef<T>;
179
  confirm(options: NzModalConfirmOptions): NzModalRef;
180
  info(options: NzModalOptions): NzModalRef;
181
  success(options: NzModalOptions): NzModalRef;
182
  error(options: NzModalOptions): NzModalRef;
183
  warning(options: NzModalOptions): NzModalRef;
184
}
185

186
// Message Service
187
interface NzMessageService {
188
  success(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
189
  error(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
190
  info(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
191
  warning(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
192
  loading(content: string, options?: NzMessageDataOptions): NzMessageDataFilled;
193
}
194
```
195

196
[Feedback Components](./feedback.md)
197

198
### Layout & Utility Components
199

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

202
```typescript { .api }
203
// Grid System
204
interface NzRowDirective {
205
  nzGutter: number | object | [number, number];
206
  nzType: 'flex';
207
  nzAlign: 'top' | 'middle' | 'bottom' | 'stretch';
208
  nzJustify: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | 'space-evenly';
209
}
210

211
interface NzColDirective {
212
  nzSpan: number;
213
  nzOffset: number;
214
  nzPush: number;
215
  nzPull: number;
216
  nzOrder: number;
217
  nzXs: number | object;
218
  nzSm: number | object;
219
  nzMd: number | object;
220
  nzLg: number | object;
221
  nzXl: number | object;
222
  nzXXl: number | object;
223
}
224
```
225

226
[Layout & Utility Components](./layout.md)
227

228
### Core Services & Configuration
229

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

232
```typescript { .api }
233
// Configuration Service
234
interface NzConfigService {
235
  getConfig(): NzConfig;
236
  getConfigForComponent<T extends NzConfigKey>(componentName: T): NzConfig[T];
237
  set<T extends NzConfigKey>(componentName: T, value: NzConfig[T]): void;
238
}
239

240
// Internationalization Service
241
interface NzI18nService {
242
  setLocale(locale: NzI18nInterface): void;
243
  getLocale(): NzI18nInterface;
244
  getLocaleId(): string;
245
  setDateLocale(dateLocale: any): void;
246
  getDateLocale(): any;
247
}
248
```
249

250
[Core Services & Configuration](./core.md)
251

252
## Types
253

254
```typescript { .api }
255
// Common Size Types
256
type NzSizeLDSType = 'large' | 'default' | 'small';
257
type NzSizeMDSType = 'middle' | 'default' | 'small';
258
type NzSizeLMSType = 'large' | 'middle' | 'small';
259
type NzSizeDSType = 'default' | 'small';
260
type NzSizeType = 'large' | 'middle' | 'small' | 'default';
261

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

265
// Direction and Status Types
266
type Direction = 'ltr' | 'rtl';
267
type NzStatus = '' | 'error' | 'warning';
268
type NzValidateStatus = '' | 'success' | 'warning' | 'error' | 'validating';
269

270
// Theme Types
271
type NzTheme = 'light' | 'dark';
272

273
// Component Export Pattern
274
interface ComponentModule {
275
  forRoot(): ModuleWithProviders<ComponentModule>;
276
}
277
```