ng-zorro-developer

Name: ng-zorro-developer
Author: mofirojean

27stars2forks

How to install ng-zorro-developer?

mofirojean/angular-ui-skills/ng-zorro-developer

$npx -y skills add mofirojean/angular-ui-skills --skill ng-zorro-developer

Installs into the current project.

Summary

Generates NG-ZORRO code and guidance for Angular projects using ng-zorro-antd. Covers installation, LESS-variable theming (default, dark, compact, aliyun presets), the experimental dynamic CSS-variable theme, component usage across all categories (general, layout, navigation, d

Files · 1

View on GitHub

SKILL.md

1	# NG-ZORRO Developer Guidelines
2
3	> Pairs with `angular-developer` , that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on NG-ZORRO specifics. Install both for the best experience.
4
5	## Compatibility
6
7	- Tracks: `ng-zorro-antd@21.3.2` (released 2026-06-27), aligned with Angular `^21.0.0`. NG-ZORRO follows Angular's major version, the major number of `ng-zorro-antd` always matches `@angular/core`.
8	- 21.3.2 delta: schematics publish as CommonJS, dropdown option overflow fix in Select. Bug-fix-only bump, no API drift vs 21.3.1.
9	- v22 status: `ng-zorro-antd@22.0.0-alpha.1` exists on the `alpha` channel (Angular v22 shipped stable 2026-06-03). No stable v22 yet, expect one after upstream Ant Design catches up.
10	- Works for: NG-ZORRO v17 → v21 projects. The skill assumes the v21 API surface, the [`migration.md`](references/migration.md) reference covers the module → standalone shift, the i18n provider change, and the per-version deprecations.
11	- Angular: v17 or newer (standalone components and the new control flow). v21 is the closest match.
12	- Zoneless / OnPush: NG-ZORRO officially supports zoneless change detection and `ChangeDetectionStrategy.OnPush`, the components are signal-aware and use `markForCheck()` internally where needed.
13	- SSR: First-class. Works under Angular Universal / `@angular/ssr`.
14	- Internationalisation: `provideNzI18n(en_US)` at the root, swap locales at runtime via `NzI18nService`.
15	- Not supported: NG-ZORRO v16 and below (Angular v16 and below, NgModule-only patterns, no signals support).
16
17	If the project's `ng-zorro-antd` major doesn't match `@angular/core`, the install will fail npm peer checks. Tell the user to upgrade Angular first, then NG-ZORRO, in lockstep, see [migration.md](references/migration.md).
18
19
20	1. Check the project's NG-ZORRO version before answering. Major versions track Angular and pick up real changes, the i18n provider became `provideNzI18n` in v17, full standalone-class exports landed in v18, dynamic theme is still experimental in v21. `package.json` is the source of truth.
21
22	2. Detect the import style up front. Pre-v18 code imports `NzModule` and registers them in `@NgModule.imports`. v18+ exports each component as a standalone class (e.g. `NzButtonComponent`) plus a slim directive set (e.g. `NzButtonDirective` for the `nz-button` attribute). New code should use standalone imports, never `NzModule` in a v18+ project. Both styles still work, mixing them in a single template is fine. See [setup.md](references/setup.md).
23
24	3. Detect the theming mode. If `src/styles.less` imports `ng-zorro-antd/ng-zorro-antd.less` → LESS variable mode (the default). If the project uses `ng-zorro-antd/style/dynamic-theme/dynamic-theme.less` and `NzConfigService` to flip CSS variables at runtime → Dynamic theme (experimental). The two paths share variable names but customise at very different layers. See [theming.md](references/theming.md).
25
26	4. After generating NG-ZORRO code, run `ng build`. The most common AI mistakes are: (a) importing `Nz*Module` into a standalone component (works, but stale pattern, prefer the standalone class); (b) forgetting to register the locale (`provideNzI18n(en_US)`), which makes DatePicker / Pagination throw at runtime; (c) using v15-era `nzI18nService` initialisation via `APP_INITIALIZER`, replaced by the provider in v17; (d) using `<nz-icon>` without `provideNzIconsPatch` / registering icons via `provideNzIcons`. See [setup.md](references/setup.md) and [migration.md](references/migration.md).
27
28	## NG-ZORRO architecture: directives, components, services
29
30	NG-ZORRO mixes three patterns. Knowing which one a component uses changes how you wire it up:
31
32	- Attribute directives on native elements, e.g. `<button nz-button nzType="primary">Save</button>`. The directive enhances a native control. Most general components (Button, Tooltip, Popover, Dropdown trigger) follow this shape.
33	- Standalone components, e.g. `<nz-table>`, `<nz-form-item>`, `<nz-date-picker>`. Render their own DOM, used for anything with internal layout or template projectio

People who liked this also viewed

6 picks

Type

ng-zorro-developer

27stars2forks

View on GitHub

How to install ng-zorro-developer?

mofirojean/angular-ui-skills/ng-zorro-developer

$npx -y skills add mofirojean/angular-ui-skills --skill ng-zorro-developer

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# NG-ZORRO Developer Guidelines
2
3	> Pairs with `angular-developer` , that skill provides Angular fundamentals (signals, DI, routing, forms, SSR, accessibility). This skill focuses on NG-ZORRO specifics. Install both for the best experience.
4
5	## Compatibility
6
7	- Tracks: `ng-zorro-antd@21.3.2` (released 2026-06-27), aligned with Angular `^21.0.0`. NG-ZORRO follows Angular's major version, the major number of `ng-zorro-antd` always matches `@angular/core`.
8	- 21.3.2 delta: schematics publish as CommonJS, dropdown option overflow fix in Select. Bug-fix-only bump, no API drift vs 21.3.1.
9	- v22 status: `ng-zorro-antd@22.0.0-alpha.1` exists on the `alpha` channel (Angular v22 shipped stable 2026-06-03). No stable v22 yet, expect one after upstream Ant Design catches up.
10	- Works for: NG-ZORRO v17 → v21 projects. The skill assumes the v21 API surface, the [`migration.md`](references/migration.md) reference covers the module → standalone shift, the i18n provider change, and the per-version deprecations.
11	- Angular: v17 or newer (standalone components and the new control flow). v21 is the closest match.
12	- Zoneless / OnPush: NG-ZORRO officially supports zoneless change detection and `ChangeDetectionStrategy.OnPush`, the components are signal-aware and use `markForCheck()` internally where needed.
13	- SSR: First-class. Works under Angular Universal / `@angular/ssr`.
14	- Internationalisation: `provideNzI18n(en_US)` at the root, swap locales at runtime via `NzI18nService`.
15	- Not supported: NG-ZORRO v16 and below (Angular v16 and below, NgModule-only patterns, no signals support).
16
17	If the project's `ng-zorro-antd` major doesn't match `@angular/core`, the install will fail npm peer checks. Tell the user to upgrade Angular first, then NG-ZORRO, in lockstep, see [migration.md](references/migration.md).
18
19
20	1. Check the project's NG-ZORRO version before answering. Major versions track Angular and pick up real changes, the i18n provider became `provideNzI18n` in v17, full standalone-class exports landed in v18, dynamic theme is still experimental in v21. `package.json` is the source of truth.
21
22	2. Detect the import style up front. Pre-v18 code imports `NzModule` and registers them in `@NgModule.imports`. v18+ exports each component as a standalone class (e.g. `NzButtonComponent`) plus a slim directive set (e.g. `NzButtonDirective` for the `nz-button` attribute). New code should use standalone imports, never `NzModule` in a v18+ project. Both styles still work, mixing them in a single template is fine. See [setup.md](references/setup.md).
23
24	3. Detect the theming mode. If `src/styles.less` imports `ng-zorro-antd/ng-zorro-antd.less` → LESS variable mode (the default). If the project uses `ng-zorro-antd/style/dynamic-theme/dynamic-theme.less` and `NzConfigService` to flip CSS variables at runtime → Dynamic theme (experimental). The two paths share variable names but customise at very different layers. See [theming.md](references/theming.md).
25
26	4. After generating NG-ZORRO code, run `ng build`. The most common AI mistakes are: (a) importing `Nz*Module` into a standalone component (works, but stale pattern, prefer the standalone class); (b) forgetting to register the locale (`provideNzI18n(en_US)`), which makes DatePicker / Pagination throw at runtime; (c) using v15-era `nzI18nService` initialisation via `APP_INITIALIZER`, replaced by the provider in v17; (d) using `<nz-icon>` without `provideNzIconsPatch` / registering icons via `provideNzIcons`. See [setup.md](references/setup.md) and [migration.md](references/migration.md).
27
28	## NG-ZORRO architecture: directives, components, services
29
30	NG-ZORRO mixes three patterns. Knowing which one a component uses changes how you wire it up:
31
32	- Attribute directives on native elements, e.g. `<button nz-button nzType="primary">Save</button>`. The directive enhances a native control. Most general components (Button, Tooltip, Popover, Dropdown trigger) follow this shape.
33	- Standalone components, e.g. `<nz-table>`, `<nz-form-item>`, `<nz-date-picker>`. Render their own DOM, used for anything with internal layout or template projectio

People who liked this also viewed

6 picks

Type