Librería de Utilidades para Angular | ng-hub-ui-utils
Librería de utilidades para Angular con pipes, focus management, overlays, transiciones y helpers de traducción compartidos entre componentes reutilizables.
Referencia API
Aquí tienes el contrato completo de utils: todo lo que puedes enlazar, escuchar, proyectar y personalizar, reunido en un solo sitio. Enlaza lo que necesites y dale el estilo que quieras — es standalone y reactivo con signals.
Inputs
Ajusta utils a tu gusto con 4 inputs. Se enlazan como cualquier @Input de Angular.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
HubTranslationService | Service | - | Servicio inyectable para gestionar las traducciones. Métodos: getTranslation(), setTranslations() |
HubOverlayService | Service | - | Servicio para crear y gestionar overlays de forma programática |
HubPopupService | Service | - | Servicio simplificado para crear elementos popup |
TooltipDirective | Directive | - | Directiva ([tooltip]) que muestra un tooltip posicionado y tematizable al pasar el cursor o enfocar. Inputs: tooltip (texto), placement, delay, offset. |
Outputs
Reacciona a lo que hace utils: 7 eventos a los que enganchar tu lógica.
| Nombre | Tipo | Descripción |
|---|---|---|
TranslatePipe | Pipe | Traduce una clave usando HubTranslationService. Uso: {{ "key" | translate }} |
GetPipe | Pipe | Obtiene el valor de una propiedad anidada. Uso: {{ object | get:"path.to.property" }} |
IsStringPipe | Pipe | Comprueba si el valor es un string. Uso: {{ value | isString }} |
IsObjectPipe | Pipe | Comprueba si el valor es un objeto. Uso: {{ value | isObject }} |
IsObservablePipe | Pipe | Comprueba si el valor es un Observable. Uso: {{ value | isObservable }} |
UcfirstPipe | Pipe | Pone en mayúscula la primera letra. Uso: {{ "hello" | ucfirst }} → "Hello" |
UnwrapAsyncPipe | Pipe | Desenvuelve valores Observable o Promise en las plantillas |
Templates
Hazlo tuyo — 4 plantillas para proyectar tu propio marcado.
| Nombre | Descripción | Ejemplo |
|---|---|---|
hubFocusTrap() | Atrapa el foco del teclado dentro de un elemento. Útil para modals y diálogos. | hubFocusTrap(zone, element, stopFocusTrap$, refocusOnClick) |
interpolateString() | Reemplaza los {{ placeholders }} con valores de un objeto | interpolateString("Hello {{name}}", { name: "World" }) → "Hello World" |
getValue() | Obtiene una propiedad anidada usando notación de puntos | getValue(obj, "user.profile.name") |
equals() | Comparación de igualdad profunda para objetos y arrays | equals({ a: 1 }, { a: 1 }) → true |