Componente Modal para Angular | ng-hub-ui-modal

Componente modal accesible para Angular con apilado, modo fullscreen, plantillas, manejo de teclado y variables CSS para apps standalone.

Última actualización 21 ago 2026

Visión General

Por qué los equipos buscan esta librería

Este componente modal para Angular está pensado para equipos que necesitan diálogos accesibles, contenido componible, control por servicio y estilos compatibles con design systems en aplicaciones standalone.

Instalación

npm install ng-hub-ui-modal

Ir a

Ideal para

  • diálogos de confirmación
  • formularios en overlay
  • paneles de detalle
  • flujos apilados

Sobre modal

ng-hub-ui-modal resuelve una de las necesidades UI más comunes en productos Angular: abrir diálogos que se comporten de forma robusta en producción. Cubre modales apilados, flujos fullscreen, control por teclado, proyecciones y uso basado en servicios sin convertir la lógica modal en un problema de cada proyecto.

Guías de uso

Apertura de modales (tipos de contenido)

Muestra cómo abrir modales con contenido basado en TemplateRef, Component o String.

Configuración y opciones

Personaliza la apariencia y el comportamiento del modal

Referencia modal (HubModalRef)

Controla y accede al estado de los modales abiertos

Modal activo (HubActiveModal)

Interactúa con el modal desde su propio contenido

Gestión del stack

Gestiona varios modales apilados

Características clave

Cambios recientes

Version 22.6.0 - 8/17/26, 12:00 AM

added: The dialog now travels between heights instead of jumping. A modal is sized by whatever it holds, so a wizard step or an async panel changing would snap the box to its new height in a single frame. The obvious repair does not work and was measured rather than assumed: the specified height is auto before the change and auto after it, and a CSS transition only fires when the specified value changes — the content moved, the property did not. interpolate-size does not help either; it interpolates to a keyword, it does not notice a box growing underneath one. So both heights are measured and animated explicitly, which also behaves identically in every browser. Tuned with --hub-modal-resize-duration and --hub-modal-resize-easing, disabled by [animation]="false" and by prefers-reduced-motion. Width already animated and is untouched.

Version 22.5.1 - 8/8/26, 12:00 AM

fixed: Documentation links now point at the canonical localized URLs. The README linked to https://hubui.dev/<path> with no locale prefix and no trailing slash, and both forms are 301-redirected, so every reader arriving from npm or GitHub landed on a redirect instead of the canonical page.

Version 22.5.0 - 7/27/26, 12:00 AM

changed: Typed modal flows: open<C, R, D>(content, options) infers the content component type, so HubModalRef.componentInstance is the component instance (no more as unknown as casts); R types the result end to end (close(result?), result: Promise<R>, closed: Observable<R>, HubActiveModal<D, R>) and HubModalOptions<D> types the data payload. All generics default to the previous loose types, so existing call sites compile unchanged.

Version 22.4.2 - 7/26/26, 12:00 AM

fixed: Declared the real ng-hub-ui-utils peer range (>=22.0.0); the previous >=1.0.0 floor allowed resolving an incompatible utils major.

Version 22.3.0 - 7/5/26, 12:00 AM

added: Typed modal payload: inject the new HUB_MODAL_DATA token or use inject(HubActiveModal).data (HubActiveModal is now generic, HubActiveModal<D>) instead of the old untyped data field (now deprecated).

Version 21.0.2 - 3/31/26, 12:00 AM

changed: Standardized padding variables and improved fullscreen layout responsiveness.

Version 21.0.1 - 3/19/26, 12:00 AM

changed: Removed hardcoded design system token defaults from stylesheet; all --hub-modal-* variables retain literal fallback values.

fixed: Fixed modal-backdrop and modal unit test reliability.

Version 21.0.0 - 3/10/26, 12:00 AM

added: HubModalPlacement configuration for anchored modal positioning.

changed: BREAKING: Standardized CSS class names to hub-modal BEM convention.

Version 1.2.0 - 1/7/25, 12:00 AM

added: Documentation and examples update

Librerías relacionadas

ng-hub-ui-portal ng-hub-ui-utils