API-Referenz

Hier ist der vollständige Vertrag für utils: 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 utils mit 4 Inputs ein. Binde sie wie jeden Angular-@Input.

Name	Typ	Standard	Beschreibung
`HubTranslationService`	`Service`	`-`	Injizierbarer Service zur Verwaltung von Übersetzungen. Methoden: getTranslation(), setTranslations()
`OverlayService`	`Service`	`-`	Service zum programmatischen Erstellen und Verwalten von Overlays
`PopupService<T>`	`Service`	`-`	Vereinfachter Service zum Erstellen von Popup-Elementen
`HubTooltipDirective`	`Directive`	`-`	Direktive ([hubTooltip]), die bei Hover oder Fokus einen positionierten, thematisierbaren Tooltip anzeigt. Eingaben: hubTooltip (Text), hubTooltipPlacement, hubTooltipDelay, hubTooltipOffset. Dank der präfigierten Namen kann sie sich ein Element mit Direktiven teilen, die ein eigenes placement deklarieren, etwa [hubDropdown].

Outputs

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

Name	Typ	Beschreibung
`TranslatePipe`	`Pipe`	Übersetzt einen Schlüssel mithilfe des HubTranslationService. Verwendung: {{ "key" \| translate }}
`GetPipe`	`Pipe`	Ruft den Wert einer verschachtelten Eigenschaft ab. Verwendung: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	Prüft, ob der Wert ein String ist. Verwendung: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	Prüft, ob der Wert ein Objekt ist. Verwendung: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	Prüft, ob der Wert ein Observable ist. Verwendung: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	Schreibt den ersten Buchstaben groß. Verwendung: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	Entpackt Observable- oder Promise-Werte in Templates

Templates

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

Name	Beschreibung	Beispiel
`hubFocusTrap()`	Fängt den Tastaturfokus innerhalb eines Elements ein. Nützlich für Modals und Dialoge.	`hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)`
`interpolateString()`	Ersetzt {{ placeholders }} durch Werte aus einem Objekt	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	Ruft eine verschachtelte Eigenschaft mithilfe der Punktnotation ab	`getValue(obj, "user.profile.name")`
`equals()`	Tiefer Gleichheitsvergleich für Objekte und Arrays	`equals({ a: 1 }, { a: 1 }) → true`
`hubAnchorToViewport`	Setzt eine Box auf der bevorzugten Seite an einen Anker, klappt nur dann auf die Gegenseite, wenn diese Seite sie nicht fasst und die andere mehr Platz hat, und hält sie auf der Querachse fest.	`hubAnchorToViewport({ anchor, box, viewport, side: 'block-start', offset: 8 }) → { x, y, side, flipped }`
`hubViewportOf`	Liest das Sichtfenster über die eigene View des Elements; `null`, wo es keine gibt, etwa beim Server-Rendering.	`hubViewportOf(element) → { width, height } \| null`
`hubFitsInViewport`	Ob eine Box dieser Größe an diesem Punkt vollständig im Sichtfenster liegt, nachdem der Rand abgezogen ist.	`hubFitsInViewport({ x, y }, { width, height }, viewport, 8) → boolean`
`hubClampToViewport`	Zieht eine Box zurück ins Sichtfenster, ohne sie weiter zu bewegen als nötig, und bevorzugt die nahe Kante, wenn sie größer als das Fenster ist.	`hubClampToViewport({ x, y }, { width, height }, viewport, 8) → { x, y }`
`hubOppositeSide`	Die Seite genau gegenüber dem Anker — der einzige sinnvolle Ausweg für eine Seite, die nicht passt.	`hubOppositeSide('inline-start') → 'inline-end'`
`hubToAnchorSide / hubToPhysicalSide`	Führt eine physische Kante über die logische Achse hin und zurück, damit eine in `top` / `bottom` / `left` / `right` geschriebene API unter RTL ihren Sinn behält, während das Umklappen nur einmal durchdacht wird.	`hubToAnchorSide('left', true) → 'inline-end'; hubToPhysicalSide('inline-end', true) → 'left'`
`HubAnchorOptions / HubAnchoredPosition`	Die Typen, die der Löser entgegennimmt und zurückgibt; lauter schlichte Zahlen, sodass sich die Arithmetik ohne Layout-Engine prüfen lässt.	`HubAnchorRect · HubAnchorSide · HubPhysicalSide · HubAnchorAlign · HubViewportSize · HubBoxSize · HubPoint`