API-Referenz

Hier ist der vollständige Vertrag für modal: alles, was du binden, abhören, projizieren und gestalten kannst, an einem Ort gesammelt. Verdrahte, was du brauchst, und gestalte, was du willst — es ist standalone und Signals-freundlich.

Inputs

Stelle modal mit 27 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`animation`	`boolean`	—	Wenn true, werden das Öffnen und Schließen des Modals animiert. Standard: true
`ariaLabelledBy`	`string`	—	ID des Elements, das den Dialog beschriftet. Wird als `aria-labelledby` auf dem Modalfenster gesetzt.
`ariaDescribedBy`	`string`	—	ID des Elements, das den Dialog beschreibt. Wird als `aria-describedby` auf dem Modalfenster gesetzt.
`closeAriaLabel`	`string`	`'Close'`	Zugänglicher Name der Schließen-Schaltfläche, die die Bibliothek in ihrer eigenen Kopfzeile zeichnet. Diese Schaltfläche trägt keinen Text — ihr Zeichen wird per CSS gemalt —, also ist diese Zeichenkette alles, was ein Screenreader ansagt: Übergeben Sie hier den übersetzten Text oder setzen Sie den Standardwert einmalig auf `HubModalConfig`. Standard: "Close"
`backdrop`	`boolean \| "static"`	—	Wenn true, wird das Backdrop-Element erstellt. Alternativ kann "static" für ein Backdrop angegeben werden, das das Modal beim Klicken nicht schließt. Standard: true
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Wächter, der unmittelbar vor dem Verwerfen des Modals aufgerufen wird. Gibt er `false`, ein mit `false` aufgelöstes Promise oder ein abgelehntes Promise zurück, bleibt der Dialog offen.
`centered`	`boolean`	—	Wenn true, wird das Modal vertikal zentriert. Standard: false
`closeOnNavigation`	`boolean`	`true`	Schließt den Dialog, sobald sich die URL der Anwendung ändert, mit `ModalDismissReasons.NAVIGATION`. Ein Dialog gehört zu dem Bildschirm, der ihn geöffnet hat: bleibt er offen, verdeckt er den nächsten, und sein Hintergrund schluckt dort jeden Klick. Eine Änderung des Pfads oder des Query-Strings zählt; eine Änderung des Ankers nicht, denn sie bewegt die Lesenden innerhalb desselben Bildschirms. Auf `false` setzen für einen Dialog, der selbst navigiert und offen bleiben muss. Standard `true`.
`closeButton`	`boolean`	`true`	Ob der Dialog die Schließen-Schaltfläche in seiner eigenen Kopfzeile zeichnet. `false` lässt sie aus dem DOM, statt sie zu verstecken: eine per CSS versteckte Schaltfläche wird weiterhin von einem Screenreader angesagt und von der Tabulatorreihenfolge erreicht — genau das, was ein Dialog ohne freien Ausweg nicht will. Es betrifft nur diese Schaltfläche; `backdrop: 'static'` und `keyboard: false` sind die beiden anderen Auswege. Standard `true`.
`placement`	`HubModalPlacement`	—	Steuert, wo das Modal im Viewport platziert wird. Standard: HubModalPlacement.Center
`offcanvas`	`boolean`	`false`	Öffnet den Dialog als Schublade: bündig an der von `placement` genannten Kante, ohne Rundung auf dieser Seite, auf die volle Höhe gestreckt (oder Breite, von oben oder unten), mit scrollendem Körper, damit Kopf- und Fußzeile stehen bleiben. Die Breite kommt aus `--hub-modal-offcanvas-width`, nicht aus der Größenskala: `size: 'lg'` sind 800px und verdecken auf einem schmalen Fenster genau das Dokument, neben dem die Schublade gelesen werden soll. Ohne `placement` öffnet sie an der Endkante.
`container`	`string \| HTMLElement`	—	CSS-Selektor oder Element, an das die Modalfenster angehängt werden. Standard: `body`
`fullscreen`	`boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| string`	—	`true` hält den Dialog bei jeder Breite im Vollbild; ein Breakpoint-Name wie `"md"` nur unterhalb dieser Breite. Jede andere Zeichenkette setzt `modal-fullscreen-<Wert>-down`. Standard: false
`injector`	`Injector`	—	Injector, mit dem die Abhängigkeiten der Inhaltskomponente aufgelöst werden.
`keyboard`	`boolean`	—	Wenn true, wird das Modal geschlossen, wenn die Escape-Taste gedrückt wird. Standard: true
`scrollable`	`boolean`	—	Fixiert den Dialog und lässt seinen Körper scrollen, statt ihn über den Viewport hinauswachsen zu lassen. Standard: false
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Größe des Modal-Fensters
`variant`	`"primary" \| "success" \| "danger" \| "warning" \| "info" \| string`	—	Semantischer Akzent des Dialogs, für die, die etwas bedeuten: eine zerstörerische Bestätigung, eine Erfolgsmeldung. Er setzt den einzigen Slot `--hub-modal-accent` neu; die Rollen emphasis / subtle / on / border werden am Dialog selbst daraus abgeleitet, sodass ein Wert den getönten Hintergrund, die Außenkante samt Kopf- und Fußlinien sowie den Titel umfärbt. Das Stylesheet liefert neun mit: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` und `dark`. Jede andere Zeichenkette wird ebenfalls akzeptiert und setzt `hub-modal--<name>` auf das Fenster: ein eigener Akzent kostet eine Regel in einem globalen Stylesheet und keine Neukompilierung. Eine obere Akzentleiste gehört ebenfalls dazu, wird aber mit der Breite null ausgeliefert: Setze `--hub-modal-accent-bar-width` am Dialog, um sie einzuschalten. Ohne Variante bleibt der Dialog neutral.
`windowClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Fenster angehängt wird
`modalDialogClass`	`string`	—	Eigene Klasse, die dem Element `hub-modal__dialog` hinzugefügt wird
`backdropClass`	`string`	—	Eine benutzerdefinierte Klasse, die an das Modal-Backdrop angehängt wird
`dismissSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Verwerfen des Modalfensters auslösen können. Standard: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Benutzerdefinierter Selektor für Elemente, die das Schließen des Modalfensters auslösen können. Standard: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Benutzerdefinierter Selektor für das Header-Element des Modal-Fensters
`footerSelector`	`string`	—	Benutzerdefinierter Selektor für das Footer-Element des Modal-Fensters
`bodySelector`	`string`	—	CSS-Selektor für den Block, dessen Kinder den Körper bilden. Ohne ihn ist der Körper das, was Kopf- und Fußzeile übrig lassen, was von der Reihenfolge im Quelltext abhängt; mit ihm wird der Körper bewusst platziert, und was kein Slot beansprucht hat, folgt ihm weiterhin.
`data`	`D`	—	Zusätzliche Daten, die an das Modal-Fenster übergeben werden müssen, wenn es geöffnet wird

Outputs

Reagiere darauf, was modal tut — 1 Events, an die du deine Logik anknüpfen kannst.

Name	Typ	Beschreibung
`dismiss`	`any`	Wird vom Modal-Fenster ausgelöst, wenn der Benutzer das Modal verwirft, z. B. durch Drücken von Escape, Klick auf das Backdrop oder Betätigen der eingebauten Schließen-Schaltfläche. Die Payload ist der Verwerfungsgrund (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK oder ein benutzerdefinierter Wert).

Methoden

Steuere modal aus dem Code heraus — 17 Methoden auf der programmatischen Schnittstelle.

Name	Signatur	Rückgabe	Beschreibung
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Öffnet ein neues Modal-Fenster mit dem angegebenen Inhalt (Komponententyp, TemplateRef oder String) und den Optionen und gibt eine HubModalRef zu seiner Steuerung zurück. Inhaltskomponenten können HubActiveModal und das HUB_MODAL_DATA-Token injizieren, um mit dem Modal zu interagieren und die Daten-Payload zu lesen.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Verwirft alle aktuell angezeigten Modal-Fenster mit dem übergebenen Grund.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Gibt an, ob in der Anwendung aktuell offene Modal-Fenster vorhanden sind.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Event-Emitter, der bei jedem Öffnen oder Entfernen eines Modals die Liste der aktuell offenen HubModalRef-Instanzen ausgibt.
`HubModalRef.close`	`close(result?: R): void`	—	Schließt das Modal mit einem optionalen Ergebniswert. Das HubModalRef.result-Promise wird mit dem übergebenen Wert aufgelöst.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Verwirft das Modal mit einem optionalen Grund. Das HubModalRef.result-Promise wird mit dem übergebenen Wert abgelehnt. Beachtet den beforeDismiss-Guard, sofern einer konfiguriert wurde.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Aktualisiert Optionen eines geöffneten Modals (aria-Attribute, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	Die Instanz der Komponente, die als Modal-Inhalt verwendet wird. Gibt undefined zurück, wenn ein TemplateRef als Inhalt verwendet wurde oder das Modal geschlossen ist.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promise, das beim Schließen des Modals mit dem Schließergebnis aufgelöst und beim Verwerfen mit dem Verwerfungsgrund abgelehnt wird.
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable, das beim Schließen des Modals das an close() übergebene Ergebnis ausgibt.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable, das beim Verwerfen des Modals den Verwerfungsgrund ausgibt — den an dismiss() übergebenen Wert oder einen internen Grund wie Backdrop-Klick oder Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable, das ausgibt und abschließt, sobald das Modal vollständig sichtbar und seine Öffnungsanimation beendet ist.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable, das ausgibt und abschließt, sobald Modal-Fenster und Backdrop verborgen, die Animationen beendet und ihre Elemente aus dem DOM entfernt sind.
`HubActiveModal.close`	`close(result?: R): void`	—	Schließt das Modal, das die Inhaltskomponente beherbergt, und löst das HubModalRef.result-Promise mit dem optionalen Ergebniswert auf.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Verwirft das Modal, das die Inhaltskomponente beherbergt, und lehnt das HubModalRef.result-Promise mit dem optionalen Grund ab.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Aktualisiert Optionen des geöffneten Modals aus dem Inneren der Inhaltskomponente.
`HubActiveModal.data`	`data: D`	`D`	Die typisierte Payload, die über HubModalOptions.data übergeben wird. Entspricht dem Injizieren des HUB_MODAL_DATA-Tokens; ergibt null, wenn keine data-Option angegeben wurde.

Templates

Mach es zu deinem — 1 Template-Slots lassen dich eigenes Markup projizieren.

Name	Beschreibung	Beispiel
`Modal Template`	Template-Referenz, die an den Modal-Service übergeben werden kann. Die Blöcke für Kopf, Körper und Fuß werden erst dann zu Slots, wenn `headerSelector`, `bodySelector` und `footerSelector` beim Öffnen angegeben werden; ohne sie landet das gesamte Template im Körper.	<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div hubModalHeader> <h4 class="hub-modal__title">Modal Title</h4> </div> <div hubModalBody> Modal content goes here </div> <div hubModalFooter> <button hubButton color="secondary" (click)="dismiss()">Cancel</button> <button hubButton color="primary" (click)="close('result')">OK</button> </div> </ng-template> <!-- The three blocks become slots only when the selectors are given: this.modal.open(this.modalTemplate, { headerSelector: '[hubModalHeader]', bodySelector: '[hubModalBody]', footerSelector: '[hubModalFooter]' }); Without them the whole template lands in hub-modal__body. -->