Angular Material

---

Übersicht

Das CR4FT Design System nutzt Angular Material (@angular/material) als technische Basis für Komponenten, die komplexe Interaktionen, Overlays oder Accessibility-Patterns erfordern.

Angular Material liefert die Funktionalität — das visuelle Styling wird vollständig durch unsere Design Tokens überschrieben.

---

Installation

ng add @angular/material

Bei der Installation wählen:

• Theme: Custom (wir bringen unser eigenes)
• Typography: Yes
• Animations: Yes

---

Welche Komponenten nutzen Angular Material?

CR4FT Komponente	Angular Material Basis	Modul
Dialog	MatDialog	@angular/material/dialog
Button FAB	MatFabButton	@angular/material/button
Tooltip	MatTooltip	@angular/material/tooltip
Select / Dropdown	MatSelect	@angular/material/select
Menu	MatMenu	@angular/material/menu
Datepicker	MatDatepicker	@angular/material/datepicker
Snackbar	MatSnackBar	@angular/material/snack-bar
Bottom Sheet	MatBottomSheet	@angular/material/bottom-sheet

Primitive Komponenten wie Button Default, Button Text, Button Icon werden ohne Angular Material gebaut.

---

Theming-Prinzip

Angular Material wird nicht über mat.define-theme() mit Farben konfiguriert. Stattdessen werden MDC CSS Custom Properties direkt mit unseren Tokens verbunden:

// In der Komponenten-SCSS
:host {
  // AM CSS Custom Property → CR4FT Token
  --mdc-filled-button-container-color: var(--color-action-primary);
  --mdc-filled-button-label-text-color: var(--color-text-on-primary);
  --mdc-filled-button-container-shape: var(--radius-md);
}

So bleibt Angular Material aktualisierbar ohne dass Tokens neu gemappt werden müssen.

---

Import-Konvention

Immer spezifische Sub-Module importieren, nie Barrel-Imports:

// ✅ Richtig
import { MatDialogModule } from '@angular/material/dialog';
import { MatButtonModule } from '@angular/material/button';

// ❌ Falsch
import { MatDialogModule } from '@angular/material';

---

Notizen