$ show NG-ZORRO/ng-zorro-antd
NG-ZORRO is a comprehensive Angular UI component library that implements the Ant Design specification. It provides over 70 enterprise-grade components including tables, forms, date pickers, modals, navigation menus, and data visualization widgets. The library is built on Angular CDK and follows modern Angular practices with extensive use of signals, standalone components, and OnPush change detection. It includes a sophisticated theming system with Less variables, full internationalization support for 60+ locales, and Angular schematics for easy project integration and version migration. The architecture is modular with tree-shakable secondary entry points, a global configuration service, and reusable patterns like the tooltip base class, string template outlet directive, and resize observer service. The codebase demonstrates strong engineering practices with comprehensive unit tests, zoneless testing support, and automated migration paths between major versions.
The LLM identified 6 files worth highlighting for reuse:
A structural directive that accepts either a string or a TemplateRef and renders it accordingly. This pattern is used across many components (tooltips, modals, notifications) to allow flexible content input. It is self-contained, well-tested, and can be extracted into any Angular project that needs to support both string and template content.
A global configuration service that allows setting default values for any component via a single injection token (NZ_CONFIG). Components subscribe to changes and update accordingly. This pattern decouples configuration from component instantiation and is reusable in any Angular library that needs per-component defaults.
A centralized resize observer service that wraps the native ResizeObserver API with Angular zone management. It provides a simple observable interface for element resize events and handles cleanup automatically. This is a clean, reusable utility for any Angular application needing responsive layout logic.
A utility module that provides predefined overlay position strategies (top, bottom, left, right, center) with fallback logic. It is used by tooltips, popovers, dropdowns, and date pickers. The pattern is self-contained and can be reused in any Angular project that needs flexible overlay positioning.
A base class (NzTooltipBaseDirective and NzTooltipBaseComponent) that implements the common overlay logic for tooltips, popovers, and popconfirms. It handles show/hide triggers, positioning, and content projection. This pattern demonstrates clean inheritance and is reusable for any overlay-based component.
A service that manages table column widths, fixed column styles, and scrollable area calculations. It uses ResizeObserver and provides reactive style streams. This is a non-trivial pattern for handling complex table layouts and can be extracted for any virtual-scrolling or fixed-column table implementation.