ng-mat-plus

ng-mat-plus

A comprehensive Angular Material–based UI component & utility library Built for enterprise-scale applications, optimized for performance, accessibility, and scalability, and fully compatible with Angular 20 Standalone Components.

Angular 20+ | MIT License | npm package

Live Documentation & Demos: https://ng-mat-plus.web.app/

Overview

ng-mat-plus is a modular Angular UI library built on top of Angular Material, designed to speed up development of large, real-world applications such as HMIS, ERP systems, Admin Panels, Dashboards, and Enterprise Platforms.

The library provides a rich collection of UI components, form controls, advanced tables, services, directives, pipes, and a flexible SCSS theming system, all following Angular and Material best practices.

Key Features

• Angular 20+ compatible (all 20.x versions)
• Modular and tree-shakable architecture
• Built with Standalone Components and Directives
• SCSS-based theming with multi-theme support
• Accessibility-first design (a11y compliant)
• Fully responsive and mobile-friendly
• Performance-optimized utilities
• Built-in services for common enterprise needs
• Client and server-side table solutions

Installation

Install via npm:

npm install ng-mat-plus

Peer Dependencies

This library supports all Angular 20 versions:

{
  "@angular/common": ">=20.0.0 <21.0.0",
  "@angular/core": ">=20.0.0 <21.0.0",
  "@angular/material": ">=20.0.0 <21.0.0"
}

Angular packages are defined as peerDependencies to prevent version conflicts and reduce bundle size.

Library Modules

UI Components

• Buttons: Flat, Raised, Stroked, Icon, FAB, Mini-FAB
• Cards and Widgets
• Menus and Side Panels
• Expansion Panels
• Tabs (configurable)
• Loaders and Progress Bars
• Tooltips

Form Components

A complete set of Material-based form controls:

• Text, Email, Password, Number, URL
• Checkbox, Radio Button, Radio Group
• Select and Multi-Select
• Autocomplete (Client and Server)
• Date Picker and Date Range Picker
• Time, Month, Week Pickers
• Phone Input
• Search Field
• Textarea

Designed for Reactive Forms and complex validation scenarios.

Tables

Enterprise-ready table solutions:

• Basic Tables (Client / Server)
• Intermediate Tables (Client / Server)
• Advanced Tables (Client / Server)

Features include pagination, dynamic columns, server integration, and reusable table configuration models.

Services

Reusable services to handle common application concerns:

• Dialog Service
• Toast and Notification Service
• Loading Indicator Service
• HTTP Wrapper Service
• Data Transfer (Signal and Observable)
• Debounce and Throttle Services
• Encryption and Decryption Service
• Breadcrumb Service
• Theme (Dark / Light) Service
• Screen Breakpoint Detection

Utilities, Directives, and Pipes

Directives

• Infinite Scroll
• Shimmer or Skeleton Loader
• Menu Trigger

Pipes

• Error Messages
• Required-Field Detection
• Serial Number Calculation
• Compact Number Formatting
• Dynamic Resolver

Utilities and Models

• API response and pagination models
• Resource state handling
• Table configuration helpers

Theming and Styling

• SCSS-based theming architecture
• Common and domain-specific themes
• Easy customization for colors, typography, buttons, tables, dialogs, menus, and widgets

Supports multiple themes (for example, HMIS-specific UI).

Architecture Highlights

• Feature-based modular structure
• Tree-shakable secondary entry points
• Clean separation of concerns
• Designed for enterprise and micro-frontend architectures
• Follows SOLID, DRY, and Clean Architecture principles

Documentation

Live demos, usage examples, and API references are available at:

https://ng-mat-plus.web.app/