API reference

Here's the full contract for utils: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.

Inputs

Dial utils in with 4 inputs. Bind them like any Angular @Input.

Name	Type	Default	Description
`HubTranslationService`	`Service`	`-`	Injectable service for managing translations. Methods: getTranslation(), setTranslations()
`HubOverlayService`	`Service`	`-`	Service for creating and managing overlays programmatically
`HubPopupService`	`Service`	`-`	Simplified service for creating popup elements
`TooltipDirective`	`Directive`	`-`	Directive ([tooltip]) that shows a positioned, themeable tooltip on hover/focus. Inputs: tooltip (text), placement, delay, offset.

Outputs

React to what utils does — 7 events to hook your logic onto.

Name	Type	Description
`TranslatePipe`	`Pipe`	Translates a key using HubTranslationService. Usage: {{ "key" \| translate }}
`GetPipe`	`Pipe`	Gets nested property value. Usage: {{ object \| get:"path.to.property" }}
`IsStringPipe`	`Pipe`	Checks if value is a string. Usage: {{ value \| isString }}
`IsObjectPipe`	`Pipe`	Checks if value is an object. Usage: {{ value \| isObject }}
`IsObservablePipe`	`Pipe`	Checks if value is an Observable. Usage: {{ value \| isObservable }}
`UcfirstPipe`	`Pipe`	Capitalizes first letter. Usage: {{ "hello" \| ucfirst }} → "Hello"
`UnwrapAsyncPipe`	`Pipe`	Unwraps Observable or Promise values in templates

Templates

Make it yours — 4 template slots let you project custom markup.

Name	Description	Example
`hubFocusTrap()`	Traps keyboard focus within an element. Useful for modals and dialogs.	`hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick)`
`interpolateString()`	Replaces {{ placeholders }} with values from an object	`interpolateString("Hello {{name}}", { name: "World" }) → "Hello World"`
`getValue()`	Gets nested property using dot notation	`getValue(obj, "user.profile.name")`
`equals()`	Deep equality comparison for objects and arrays	`equals({ a: 1 }, { a: 1 }) → true`