ng-zorro-antd

ng-zorro-antd (NG-ZORRO) ports Ant Design’s design language to Angular, shipping over 70 production-ready components — buttons, forms, tables, date pickers, layout primitives, and more — each with full TypeScript typings, per-component subpath imports for tree-shaking, and Angular CDK underpinnings for accessibility and overlay behavior.

Beyond the component set, it bundles a config service for global defaults, a theming system with multiple prebuilt CSS variants (dark, compact, variable, Aliyun CDN), an i18n module covering dozens of locales, and Angular schematics (ng add ng-zorro-antd) that wire up assets and styles automatically. Zoneless change detection and OnPush are supported throughout for performance-sensitive apps.

What You Get

• 70+ Angular components spanning forms, data display, navigation, feedback, and layout, each importable from its own subpath (e.g. ng-zorro-antd/button)
• Angular schematics (ng add ng-zorro-antd) that configure icon assets and stylesheets in angular.json automatically
• A theming pipeline producing prebuilt default, dark, compact, and CSS-variable stylesheet bundles, plus Less-based custom theming
• An i18n module with translation tables for dozens of languages and a date-adapter layer built on date-fns
• Shared core services (NzConfigService, form-size tokens, overlay/wave/animation utilities) that components consume via Angular DI
• ng-update migration schematics that automate breaking-change upgrades between major versions

Common Use Cases

• Standing up an internal admin dashboard or back-office tool quickly with a full component set instead of building tables, forms, and modals from scratch
• Adopting a consistent enterprise design system across multiple Angular applications within an organization
• Building a multi-locale product where the same component library needs to render correctly in dozens of languages
• Migrating an AntD-based design spec from a React codebase to an Angular one without redesigning the UI language
• Zoneless or OnPush-heavy Angular apps that need a UI library already validated against modern change-detection strategies

Under The Hood

Architecture The repository is an Nx-managed monorepo where each component lives in its own directory under components/ (99 top-level entries) with a self-contained public-api.ts, *.module.ts, styles, demos, and spec file, so consumers can subpath-import (ng-zorro-antd/button) and tree-shake unused components. Cross-cutting concerns are centralized in components/core/ — config (NzConfigService, per-component WithConfig decorators), i18n, animation, overlay, wave-effect, and a small render/tree utility layer — which individual components inject via Angular’s DI rather than reimplementing. Components increasingly use Angular’s newer primitives (signal, computed, contentChild, afterEveryRender) alongside the older @Input/NgModule pattern, indicating an incremental modernization rather than a rewrite. Schematics under schematics/ (ng-add, ng-update, ng-generate) hook into the Angular CLI to automate installation and version migrations, extending the architecture beyond the runtime library into tooling.

Tech Stack Built on Angular 22 and TypeScript, with @angular/cdk supplying overlay, bidi, and accessibility primitives, @ant-design/icons-angular for the icon set, date-fns for date handling, and @ctrl/tinycolor for theme color math. Styling is authored in Less and compiled into multiple prebuilt bundles (default, dark, compact, variable, Aliyun-CDN icon variant). The library is packaged with ng-packagr via Nx targets, tested with Vitest (including a browser/Playwright provider for component tests), and built/released through Azure Pipelines rather than GitHub Actions (only a style-sync workflow lives in .github/workflows/).

Code Quality The components tree contains 149 .spec.ts test files alongside component sources, run through nx run ng-zorro-antd-lib:test with coverage uploaded to Codecov as a dedicated CI stage. Linting combines typescript-eslint, angular-eslint, eslint-plugin-jsdoc, and a custom header-enforcement rule, run as its own CI stage separate from tests and the build. A Husky pre-commit hook runs a full tsc --noEmit type-check plus lint-staged before any commit lands, and schematics have their own isolated test suite (test:schematics) — indicating quality gates are enforced per subsystem, not just at the top level.

API Design Components follow a consistent nz-prefixed attribute/selector convention (nz-button, nzType, nzLoading) that reads predictably once learned, and the ng add schematic removes the usual manual asset/style wiring most Angular UI libraries require. Per-component subpath exports keep bundle impact opt-in, and the ng-update migration schematics reduce the usual pain of upgrading a component library across major Angular versions. The one friction point is the sheer surface area — 70+ components each with their own configuration options — which raises the discovery cost of the full API even though any individual component is simple to use.