Skip to content
Design System

ui-modal

@mmm/ui-modal

Installation

Terminal window
pnpm add @mmm/ui-modal

Peer Dependencies muessen im Service vorhanden sein:

Inhalt

Das Paket exportiert:

Schnellstart

const ref = dialog.open(MyDialogComponent, {
  data: { id: "123" },
  width: "760px",
  maxWidth: "1000px",
  maxHeight: "90dvh",
  overflow: "auto",
});


ref.afterClosed().subscribe((result) => {
  // Dialog-Ergebnis verarbeiten
});

Alle Größen bleiben innerhalb des Viewports. Ohne Größenangabe passt sich das Panel dynamisch an seinen Inhalt an.

Open-Optionen

  • width, minWidth, maxWidth, height, maxHeight
  • contentPadding
  • overflow: "auto", "hidden" oder "visible"
  • closeOnBackdrop und closeOnEscape (Standard jeweils true)
  • ariaLabel
  • panelClass und backdropClass

Header und Aktionen

Bestehende Header-Direktiven bleiben unverändert:

<span mmm-modal-header>Dialogtitel</span>
<ng-template mmm-modal-actions-right>
  <button type="button" (click)="ref.close()">Schließen</button>
</ng-template>

Optional können Aktionen in einem festen Footer platziert werden:

<ng-template mmm-modal-footer-actions-left>
  <button type="button" (click)="ref.close()">Abbrechen</button>
</ng-template>
<ng-template mmm-modal-footer-actions-right>
  <button type="button" (click)="save()">Speichern</button>
</ng-template>

Middleware einbinden

RequestContext

CorrelationIdMiddleware

RequestLoggingMiddleware

AllExceptionsFilter

Logging

Entwicklung

Build:

Terminal window
pnpm build

Publish passiert ueber die Bitbucket-Pipeline.

Hinweise