@all-the.rest/mat-extended

Extended Angular Material components — Cropper, File Upload, Data Table, Dialog, Toast, Menu, Multi-Select, Breadcrumb, and File Manager.

Unofficial community project — not affiliated with Google or the Angular team. "Angular" and "Material" are trademarks of Google LLC.

Demo

mat-extended.all-the.rest

Installation

npm install @all-the.rest/mat-extended @angular/material @angular/cdk

Components

| Component | Entry Point | Import | |---|---|---| | Image Cropper | @all-the.rest/mat-extended/cropper | import { RuiCropper } from '@all-the.rest/mat-extended/cropper' | | File Upload | @all-the.rest/mat-extended/file-upload | import { RuiFileUpload } from '@all-the.rest/mat-extended/file-upload' | | Data Table | @all-the.rest/mat-extended/data-table | import { RuiDataTable } from '@all-the.rest/mat-extended/data-table' | | Dialog | @all-the.rest/mat-extended/dialog | import { RuiDialogService } from '@all-the.rest/mat-extended/dialog' | | Toast | @all-the.rest/mat-extended/toast | import { RuiToastService } from '@all-the.rest/mat-extended/toast' | | Menu | @all-the.rest/mat-extended/menu | import { RuiMenuButton } from '@all-the.rest/mat-extended/menu' | | Multi-Select | @all-the.rest/mat-extended/multi-select | import { RuiMultiSelect } from '@all-the.rest/mat-extended/multi-select' | | Breadcrumb | @all-the.rest/mat-extended/breadcrumb | import { RuiBreadcrumb } from '@all-the.rest/mat-extended/breadcrumb' | | File Manager | @all-the.rest/mat-extended/file-manager | import { RuiFileManager } from '@all-the.rest/mat-extended/file-manager' |

Quick Start

// app.config.ts
import { provideRuiToast } from '@all-the.rest/mat-extended/toast';

export const appConfig: ApplicationConfig = {
  providers: [
    provideRuiToast(),
  ]
};

// any.component.ts
import { RuiCropper } from '@all-the.rest/mat-extended/cropper';

@Component({
  standalone: true,
  imports: [RuiCropper],
  template: `<rui-cropper [image]="imageUrl" (cropped)="onCrop($event)" />`
})

Features

• Angular v22 — Standalone Components, Signals, Zoneless
• Material 3 Theming — M3 tokens via Tailwind CSS
• Reactive Forms — every form component supports ControlValueAccessor
• Signal API — model() signals for all components
• SSR-compatible — all browser APIs guarded
• TypeScript — strict mode, full type inference
• Tree-shakable — import only what you need

Requirements

| Peer Dependency | Version | |---|---| | @angular/core | ^22.0.0 | | @angular/common | ^22.0.0 | | @angular/forms | ^22.0.0 | | @angular/material | ^22.0.0 |

Snapshot Builds

Latest development build from main:

npm install @all-the.rest/mat-extended@snapshot

Links

• Demo App
• GitHub Repository
• Report Issues
• Contributing

License

MIT © Florian Reisinger — see LICENSE.