mat-x / ngx-matx-workspace

About

This monorepo contains:

| Project | Path | Description | |---------|------|-------------| | ngx-matx | projects/ngx-matx | Publishable Angular component library (npm package) | | ngx-matx-demo | projects/ngx-matx-demo | Interactive demo application with live examples |

The library provides 28+ standalone components — form controls, pickers, media players, org charts, schedulers, alerts, side sheets, command palettes, onboarding wizards, tour guides, query builders, and workflow designers.

📦 npm package: ngx-matx
📖 Full component docs: projects/ngx-matx/README.md

Install in your app

npm install ngx-matx @angular/material @angular/cdk @angular/animations

import { MatxColorPickerComponent } from 'ngx-matx';

@Component({
  imports: [MatxColorPickerComponent],
  template: `<matx-color-picker formControlName="color" label="Color" />`,
})
export class MyComponent {}

See the library README for setup details, peer dependencies, and usage examples.

Component overview

Form controls

Color Picker · Time Picker · Date Picker (Gregorian / Jalali / Hijri) · OTP Input · Mention Input · Password Strength · Rating · Signature Pad · Image Cropper

Pickers & selectors

Emoji Picker · Icon Picker · Tree Select · Location Picker

Media & files

Video Player · Audio Player · QR Code Generator · QR Code Reader

Display & data

Skeleton Loader · Org Chart · Scheduler · Permission Matrix · Alert · Side Sheet

Productivity

Command Palette · Onboarding · Tour Guide · Query Builder · Workflow Designer

Workspace scripts

| Command | Description | |---------|-------------| | npm start | Serve demo app on port 9000 | | npm run build:lib | Build ngx-matx library to dist/ngx-matx | | npm run build:demo | Build demo app | | npm run build | Build library + demo | | npm test | Run library unit tests | | npm run publish:lib | Build and publish library to npm |

Project structure

ngx-matx-workspace/
├── projects/
│   ├── ngx-matx/              # Library source
│   │   ├── src/lib/
│   │   │   ├── core/          # Shared base types & form utilities
│   │   │   ├── form-controls/ # Input & picker components
│   │   │   └── display/       # Display, overlay & productivity components
│   │   ├── src/public-api.ts  # Public exports
│   │   └── package.json       # npm package metadata
│   └── ngx-matx-demo/         # Demo application
│       └── src/app/pages/     # One demo page per component
├── dist/ngx-matx/             # Built library (after ng build)
└── package.json               # Workspace root

Requirements

• Node.js ≥ 18.19
• Angular 19.x
• Angular Material 19.x

Tech stack

• Angular 19 (standalone components, signals-friendly)
• Angular Material & CDK
• TypeScript
• SCSS
• Leaflet (optional, location picker)
• CropperJS (image cropper)
• ZXing (QR reader)
• jalaali-js (Jalali calendar)

Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes and add tests where appropriate
4. Run npm test and npm run build:lib
5. Open a pull request

Bug reports and feature requests: GitHub Issues

Author

mohammadbagher sharifi
[email protected] · GitHub

License

MIT © mohammadbagher sharifi