$ show NG-NEST/ng-nest
This repository is the source code for the NG-NEST Angular UI component library (version 22.0.5), providing over 70 reusable components for building enterprise-grade web applications. The library includes a comprehensive set of UI elements such as buttons, tables, forms, dialogs, trees, date pickers, and more, all built with Angular's latest features including signals, standalone components, and OnPush change detection. The repository also contains a documentation/demo site that showcases each component with live examples in both English and Chinese, along with a full RBAC tutorial demonstrating a real-world admin panel using NestJS and Angular. The architecture follows a monorepo pattern: the library lives under `lib/ng-nest/ui/` with each component as an independent Angular module (with its own `ng-package.json`), while the documentation site resides in `src/` and uses the library itself. Key entry points include `lib/ng-nest/ui/index.ts` for the library and `src/app/app.config.ts` for the application. Data flows are primarily unidirectional via Angular signals and observables, with services like `XRepositoryAbstract` providing a consistent CRUD pattern for backend integration. External dependencies include Angular 22, Angular CDK, RxJS, and PrismJS for syntax highlighting. The library demonstrates strong engineering practices: consistent component property classes, a centralized portal service for overlays, a theme system with CSS variables and dark mode, and full internationalization support with 30+ locales. However, many component tests are disabled (using `xdescribe`), and there is some duplication in example data across language variants. Overall, it is a well-maintained, production-ready UI library with a high degree of reusability.
The LLM identified 5 files worth highlighting for reuse:
XPortalService provides a centralized, reusable mechanism for attaching Angular components or templates to overlays using Angular CDK's Overlay module. It handles positioning, attachment, and cleanup, and is used by dialogs, drawers, tooltips, popovers, color pickers, and cascading dropdowns. This service encapsulates complex overlay logic into a simple API, making it easy to create floating UI elements consistently across the library.
XFormControlFunction is a factory function that creates a base class for all form control components (input, select, checkbox, radio, etc.). It extends ControlValueAccessor and provides built-in validation, disabled state, required state, and label support. This pattern ensures all form controls have a consistent API and behavior, reducing boilerplate and enabling seamless integration with Angular reactive forms and ngModel.
XRepositoryAbstract is an abstract service that defines a standard CRUD interface (getList, get, post, put, delete) with pagination, filtering, and sorting support. It is used by components like tables and forms to interact with backend APIs in a consistent way. The pattern allows developers to implement concrete repositories for different data sources while reusing the same component logic, making it highly reusable across projects.
XColorPickerPortalComponent is a standalone color picker overlay that supports multiple color formats (hex, rgba, hsla) with manual conversion algorithms between HSL, HSV, and RGB. It features a drag plate for hue/saturation selection, a transparency slider, and tabbed input fields. The component demonstrates non-obvious skill in color science and provides a fully functional, reusable color picker that can be attached to any input via the portal service.
XTransferComponent is a highly configurable dual-list selector that supports list, tree, and table modes with drag-and-drop reordering, search filtering, pagination, and custom templates for nodes, titles, and footers. It uses Angular signals for state management and integrates with the CDK drag-drop module. This component solves a common enterprise UI pattern (data transfer between lists) with extensive customization options, making it directly reusable in any Angular application.