$ show ng-matero/extensions
Ng-Matero Extensions is an Angular component library that extends Angular Material with 15+ additional UI components including grid, datetimepicker, colorpicker, popover, tooltip, select, split, dialog, drawer, loader, progress, alert, button loading, checkbox-group, and photoviewer. The library is built for Angular 22 and supports both Material Design 2 and 3 theming via Sass mixins and CSS custom properties. It provides date adapters for native, moment, luxon, and date-fns libraries. The repository includes a development app for interactive demos and a documentation site with live examples, API references, and i18n support (English and Chinese). The codebase demonstrates strong engineering practices with standalone components, CDK overlay usage, adapter patterns, and performance optimizations like coalesced style scheduling. However, it relies on several third-party dependencies (ng-select, color-picker, photoviewer) and uses some deprecated Angular Material APIs, indicating moderate maintenance risk.
The LLM identified 4 files worth highlighting for reuse:
Abstract class `DatetimeAdapter` that defines a common interface for date/time operations (create, format, parse, add, compare, etc.) with locale support. Concrete implementations for native Date, Moment, Luxon, and date-fns are provided in separate packages. This pattern allows the datetimepicker component to work with any date library, making it highly reusable across projects that need a consistent date API.
Interface `ResizeStrategy` with two implementations: `TableLayoutFixed` and `CdkFlexTable`. These encapsulate the logic for resizing columns in different table layout modes (fixed vs flex). The strategy pattern allows the column resize directive to be decoupled from the specific table implementation, making it reusable for any table that needs resizable columns.
A `CoalescedStyleScheduler` that batches DOM style changes to avoid layout thrashing during column resize operations. It uses `requestAnimationFrame` and a queue to coalesce multiple style updates into a single frame. This pattern is reusable in any application that needs to perform frequent DOM mutations efficiently.
Directive `MtxPopoverTrigger` that attaches a popover to a trigger element using Angular CDK overlay. It supports multiple trigger events (click, hover, focus), configurable positions, delays, and lazy rendering. The implementation demonstrates a clean separation between trigger logic and overlay content, making it a reusable pattern for any overlay-based UI component.