Referencia API

Aquí tienes el contrato completo de modal: 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 modal a tu gusto con 27 inputs. Se enlazan como cualquier @Input de Angular.

Nombre	Tipo	Por defecto	Descripción
`animation`	`boolean`	—	Si es true, la apertura y el cierre del modal se animarán. Por defecto: true
`ariaLabelledBy`	`string`	—	ID del elemento que etiqueta el diálogo. Se aplica como `aria-labelledby` en la ventana del modal.
`ariaDescribedBy`	`string`	—	ID del elemento que describe el diálogo. Se aplica como `aria-describedby` en la ventana del modal.
`closeAriaLabel`	`string`	`'Close'`	Nombre accesible del botón de cierre que la librería dibuja en su propia cabecera. Ese botón no lleva texto —su aspa la pinta el CSS—, así que esta cadena es todo lo que anuncia un lector de pantalla: pasa aquí el texto traducido, o fija el valor por defecto una sola vez en `HubModalConfig`. Por defecto: "Close"
`backdrop`	`boolean \| "static"`	—	Si es true, se creará el elemento de backdrop. Alternativamente, especifica "static" para un backdrop que no cierra el modal al hacer clic. Por defecto: true
`beforeDismiss`	`() => boolean \| Promise<boolean>`	—	Guarda que se invoca justo antes de descartar el modal. Si devuelve `false`, una promesa resuelta con `false` o una promesa rechazada, el diálogo se queda abierto.
`centered`	`boolean`	—	Si es true, el modal se centrará verticalmente. Por defecto: false
`closeOnNavigation`	`boolean`	`true`	Cierra el diálogo cuando cambia la URL de la aplicación, con `ModalDismissReasons.NAVIGATION`. Un diálogo pertenece a la pantalla que lo abrió: si se queda abierto, tapa la siguiente y su telón se traga todos los clics. Cuenta el cambio de ruta o de parámetro de consulta; el de ancla no, porque mueve al lector dentro de la misma pantalla. Ponlo a `false` en un diálogo que navegue por su cuenta y deba seguir abierto. Por defecto, `true`.
`closeButton`	`boolean`	`true`	Si el diálogo dibuja el botón de cerrar de su propia cabecera. Con `false` no se renderiza, en vez de esconderse: un botón oculto por CSS lo sigue anunciando un lector de pantalla y lo sigue alcanzando el tabulador, que es justo lo que no quiere un diálogo sin salida libre. Manda solo sobre ese botón; `backdrop: 'static'` y `keyboard: false` son las otras dos salidas. Por defecto, `true`.
`placement`	`HubModalPlacement`	—	Controla dónde se ubica el modal dentro del viewport. Por defecto: HubModalPlacement.Center
`offcanvas`	`boolean`	`false`	Abre el diálogo como un cajón: pegado al borde que nombra `placement`, sin redondeo en ese lado, estirado al alto completo (o al ancho, desde arriba o abajo) y con el cuerpo desplazándose para que la cabecera y el pie no se muevan. Su ancho sale de `--hub-modal-offcanvas-width`, no de la escala de tallas: `size: 'lg'` son 800px, que en una ventana estrecha tapan el documento que el cajón pretende acompañar. Sin `placement` abre desde el borde final, así que un cajón es una sola decisión. Va aparte de `placement` a propósito: un placement de borde a solas sigue dando el diálogo flotante de siempre.
`container`	`string \| HTMLElement`	—	Selector CSS o elemento al que se añaden las ventanas de modal. Por defecto: `body`
`fullscreen`	`boolean \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| string`	—	`true` mantiene el diálogo a pantalla completa en cualquier ancho; un nombre de breakpoint como `"md"` solo por debajo de ese ancho. Cualquier otra cadena aplica `modal-fullscreen-<valor>-down`. Por defecto: false
`injector`	`Injector`	—	Injector con el que se resuelven las dependencias del componente de contenido.
`keyboard`	`boolean`	—	Si es true, el modal se cerrará al pulsar la tecla Escape. Por defecto: true
`scrollable`	`boolean`	—	Fija el diálogo y desplaza su cuerpo, en lugar de dejar que el diálogo crezca más allá del viewport. Por defecto: false
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Tamaño de la ventana del modal
`variant`	`"primary" \| "success" \| "danger" \| "warning" \| "info" \| string`	—	Acento semántico del diálogo, para los que significan algo: una confirmación destructiva, un aviso de éxito. Reasigna la base de la única ranura `--hub-modal-accent`, y los roles emphasis / subtle / on / border se derivan de ella en el propio diálogo, así que un solo valor recolorea el fondo teñido, el borde exterior con sus filetes de cabecera y pie, y el título. La hoja de estilos trae nueve: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `neutral`, `light` y `dark`. También se acepta cualquier otra cadena, que aplica `hub-modal--<nombre>` a la ventana: un acento propio cuesta una regla en una hoja global y ninguna recompilación. La barra de acento superior también forma parte del conjunto, pero sale con grosor cero: se enciende fijando `--hub-modal-accent-bar-width` en el diálogo. Sin variante el diálogo queda neutro.
`windowClass`	`string`	—	Una clase personalizada para añadir a la ventana del modal
`modalDialogClass`	`string`	—	Clase personalizada que se añade al elemento `hub-modal__dialog`
`backdropClass`	`string`	—	Una clase personalizada para añadir al backdrop del modal
`dismissSelector`	`string`	—	Selector personalizado para los elementos que pueden activar el descarte de la ventana del modal. Por defecto: "[data-dismiss=\"modal\"]"
`closeSelector`	`string`	—	Selector personalizado para los elementos que pueden activar el cierre de la ventana del modal. Por defecto: "[data-close=\"modal\"]"
`headerSelector`	`string`	—	Selector personalizado para el elemento de cabecera de la ventana del modal
`footerSelector`	`string`	—	Selector personalizado para el elemento de pie de la ventana del modal
`bodySelector`	`string`	—	Selector CSS del bloque cuyos hijos forman el cuerpo. Sin él, el cuerpo es lo que dejan la cabecera y el pie, que depende del orden en que esté escrito el contenido; con él, el cuerpo se coloca a propósito y lo que no reclame ningún hueco sigue yendo detrás.
`data`	`D`	—	Datos adicionales que se deben pasar a la ventana del modal cuando se abre

Outputs

Reacciona a lo que hace modal: 1 eventos a los que enganchar tu lógica.

Nombre	Tipo	Descripción
`dismiss`	`any`	Lo emite la ventana del modal cuando el usuario descarta el modal, p. ej. pulsando Escape, haciendo clic en el backdrop o activando el botón de cierre integrado. El payload es la razón del descarte (ModalDismissReasons.ESC, ModalDismissReasons.BACKDROP_CLICK o un valor personalizado).

Métodos

Controla modal desde el código — 17 métodos en su superficie programática.

Nombre	Firma	Devuelve	Descripción
`HubModal.open`	`open<C, R, D>(content: Type<C> \| TemplateRef<any> \| string, options?: HubModalOptions<D>): HubModalRef<C, R>`	`HubModalRef<C, R>`	Abre una nueva ventana de modal con el contenido dado (tipo de componente, TemplateRef o string) y las opciones, y devuelve un HubModalRef para controlarla. Los componentes de contenido pueden inyectar HubActiveModal y el token HUB_MODAL_DATA para interactuar con el modal y leer el payload de datos.
`HubModal.dismissAll`	`dismissAll(reason?: any): void`	—	Descarta todas las ventanas de modal mostradas actualmente con la razón proporcionada.
`HubModal.hasOpenModals`	`hasOpenModals(): boolean`	`boolean`	Indica si hay actualmente ventanas de modal abiertas en la aplicación.
`HubModal.activeInstances`	`activeInstances: EventEmitter<HubModalRef[]>`	`EventEmitter<HubModalRef[]>`	Emisor de eventos que emite la lista de instancias HubModalRef abiertas actualmente cada vez que se abre o se elimina un modal.
`HubModalRef.close`	`close(result?: R): void`	—	Cierra el modal con un valor de resultado opcional. La promesa HubModalRef.result se resuelve con el valor proporcionado.
`HubModalRef.dismiss`	`dismiss(reason?: any): void`	—	Descarta el modal con un valor de razón opcional. La promesa HubModalRef.result se rechaza con el valor proporcionado. Respeta el guard beforeDismiss cuando se configuró uno.
`HubModalRef.update`	`update(options: HubModalUpdatableOptions): void`	—	Actualiza opciones de un modal abierto (atributos aria, centered, placement, fullscreen, backdropClass, size, variant, windowClass, modalDialogClass).
`HubModalRef.componentInstance`	`componentInstance: C \| void`	`C \| void`	La instancia del componente usado como contenido del modal. Devuelve undefined cuando se usó un TemplateRef como contenido o cuando el modal está cerrado.
`HubModalRef.result`	`result: Promise<R>`	`Promise<R>`	Promesa que se resuelve con el resultado de cierre cuando el modal se cierra y se rechaza con la razón del descarte cuando se descarta.
`HubModalRef.closed`	`closed: Observable<R>`	`Observable<R>`	Observable que emite el resultado pasado a close() cuando el modal se cierra.
`HubModalRef.dismissed`	`dismissed: Observable<any>`	`Observable<any>`	Observable que emite la razón del descarte cuando el modal se descarta — el valor pasado a dismiss(), o una razón interna como el clic en el backdrop o Escape.
`HubModalRef.shown`	`shown: Observable<void>`	`Observable<void>`	Observable que emite y se completa una vez que el modal es totalmente visible y su animación de apertura ha terminado.
`HubModalRef.hidden`	`hidden: Observable<void>`	`Observable<void>`	Observable que emite y se completa una vez que tanto la ventana del modal como el backdrop están ocultos, las animaciones han terminado y sus elementos se han eliminado del DOM.
`HubActiveModal.close`	`close(result?: R): void`	—	Cierra el modal que aloja el componente de contenido, resolviendo la promesa HubModalRef.result con el valor de resultado opcional.
`HubActiveModal.dismiss`	`dismiss(reason?: any): void`	—	Descarta el modal que aloja el componente de contenido, rechazando la promesa HubModalRef.result con el valor de razón opcional.
`HubActiveModal.update`	`update(options: HubModalUpdatableOptions): void`	—	Actualiza opciones del modal abierto desde dentro del componente de contenido.
`HubActiveModal.data`	`data: D`	`D`	El payload tipado pasado a través de HubModalOptions.data. Equivale a inyectar el token HUB_MODAL_DATA; se resuelve a null cuando no se proporcionó la opción data.

Templates

Hazlo tuyo — 1 plantillas para proyectar tu propio marcado.

Nombre	Descripción	Ejemplo
`Modal Template`	Referencia de plantilla que se puede pasar al servicio de modales. Los bloques de cabecera, cuerpo y pie solo se convierten en huecos si se indican `headerSelector`, `bodySelector` y `footerSelector` al abrir; sin ellos, toda la plantilla va al cuerpo.	<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div hubModalHeader> <h4 class="hub-modal__title">Modal Title</h4> </div> <div hubModalBody> Modal content goes here </div> <div hubModalFooter> <button hubButton color="secondary" (click)="dismiss()">Cancel</button> <button hubButton color="primary" (click)="close('result')">OK</button> </div> </ng-template> <!-- The three blocks become slots only when the selectors are given: this.modal.open(this.modalTemplate, { headerSelector: '[hubModalHeader]', bodySelector: '[hubModalBody]', footerSelector: '[hubModalFooter]' }); Without them the whole template lands in hub-modal__body. -->