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 14 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
`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
`centered`	`boolean`	—	Si es true, el modal se centrará verticalmente. Por defecto: false
`placement`	`HubModalPlacement`	—	Controla dónde se ubica el modal dentro del viewport. Por defecto: HubModalPlacement.Center
`keyboard`	`boolean`	—	Si es true, el modal se cerrará al pulsar la tecla Escape. Por defecto: true
`closeOnNavigation`	`boolean`	—	Si es true, el modal se cerrará cuando el usuario navegue hacia atrás en el historial del navegador (history.back(), botón atrás del navegador). Por defecto: true
`size`	`"sm" \| "lg" \| "xl" \| string`	—	Tamaño de la ventana del modal
`windowClass`	`string`	—	Una clase personalizada para añadir a la ventana del modal
`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
`data`	`any`	—	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 modal	`<ng-template #modalTemplate let-close="close" let-dismiss="dismiss"> <div class="modal-header"> <h4 class="modal-title">Modal Title</h4> </div> <div class="modal-body"> Modal content goes here </div> <div class="modal-footer"> <button class="btn btn-secondary" (click)="dismiss()">Cancel</button> <button class="btn btn-primary" (click)="close('result')">OK</button> </div> </ng-template>`