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.
Ejemplos interactivos
Explora ejemplos en vivo que muestran cómo se comporta la librería en casos de uso habituales de Angular.
Tipos de contenido modal
The open() method accepts various content types:
Un diálogo sin salida libre
Look at the top-right corner of each one. In the second dialog the button is not hidden — it is not there.
Opciones de configuración
Posiciones del modal
Offcanvas: un cajón que toca su borde
With the switch off, look at the bottom edge and at the corners on the side it slid out of.
Control mediante referencia modal
Modal activo (autocierre)
This example opens a component (not a template) that injects HubActiveModal.
Payload de datos tipado
Modales apilados
HubModal supports multiple stacked modals. The last modal has focus.
Modal fullscreen
Proyección de contenido
This example demonstrates how to create reusable wrapper components for modal content.
Naming the header and footer slots is also what makes the library draw its own header, dismiss button included. That button ships named "Close", in English, and the library translates nothing: closeAriaLabel is how the application passes the string it has already translated — per call, as here, or once for the whole application on HubModalConfig.
Cuerpo con nombre
The body used to be the one slot with no name — whatever survived the header and the footer being taken out. bodySelector gives it one, so the order the content happens to be written in stops deciding what the body is.
Nothing is ever dropped: what no selector claims still follows the named body.
Variantes semánticas: un acento y el diálogo entero
The nine on the first row are the built-ins. brand is not one of them: it is six declarations in this example's own stylesheet, five of which only name another --hub-modal-accent-* role.
Estilos con variables CSS
Open a modal themed with --hub-modal-* variables.