Ejemplos interactivos

Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.

Pipes de utilidad

GetPipe - Access nested properties

user | get:'profile.name'→ John Doe

user | get:'profile.address.city'→ New York

IsStringPipe - Type checking

'Hello' | isString→ true

123 | isString→ false

IsObjectPipe - Object detection

{ a: 1 } | isObject→ true

'string' | isObject→ false

UcfirstPipe - Capitalize first letter

'hello world' | ucfirst→ Hello world

Servicio y pipe de traducción

TranslatePipe - Basic usage

'welcome' | translate→ Welcome to ng-hub-ui

TranslatePipe - With parameters

'greeting' | translate:{ name: 'Carlos' }→ Hello, Carlos!

TranslatePipe - Nested keys

'buttons.save' | translate→ Save

'buttons.cancel' | translate→ Cancel

Programmatic access

translationService.getTranslation('buttons.delete')→ Delete

Adaptador i18n externo

Configura un puente reactivo de traducciones en app.config.ts para todas las bibliotecas Hub UI.

Funciones de utilidad

Type Guards

isString('hello')→ true

isNumber(42)→ true

isDefined(null)→ false

isDefined('value')→ true

Deep Equality

equals({a:1}, {a:1})→ true

equals([1,2], [1,2])→ true

Object Access

getValue(user, 'profile.name')→ John Doe

String Interpolation

interpolateString('Hello {{name}}', {name: 'World'})→ Hello World

String Utilities

removeAccents('Ñoño café')→ Nono cafe

padNumber(5)→ 05

Atrapado de foco

Focus Trap Demo

Click "Enable Focus Trap" and try to Tab outside the blue box. Focus will stay trapped inside.

Focus Trap Area

Status: 🔓 Free

Focusable Elements

The selector FOCUSABLE_ELEMENTS_SELECTOR finds all focusable elements.

getFocusableBoundaryElements(container)→ [first, last] elements

Utilidades de scrollbar

ScrollBar Service

The ScrollBar service helps manage scrollbar visibility and compensate for layout shifts when hiding scrollbars (e.g., when opening modals).

Use Case: Modal Body Lock

When opening a modal, you typically hide the body scrollbar. The ScrollBar.hide() method handles this automatically and returns a reverter function.

Status: 🔓 Normal scrolling

Code Example

import { inject } from '@angular/core';
import { ScrollBar } from 'ng-hub-ui-utils';

export class ModalService {
  private scrollBar = inject(ScrollBar);
  private revertScrollbar: (() => void) | null = null;

  openModal() {
    // Hide scrollbar and get reverter function
    this.revertScrollbar = this.scrollBar.hide();
  }

  closeModal() {
    // Restore scrollbar
    if (this.revertScrollbar) {
      this.revertScrollbar();
      this.revertScrollbar = null;
    }
  }
}

Sistema de superposición

A connected overlay positioned below the trigger, with a backdrop that closes it on outside click.