Portal y Renderizado Overlay para Angular | ng-hub-ui-portal

Librería portal para Angular que permite renderizar componentes, plantillas y overlays fuera del árbol DOM actual con control de posicionamiento.

Ejemplos interactivos

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

Renderizado de componentes

Renderizado de TemplateRef

Contenido de texto

Paso de datos

Proyección de contenido

Apertura progresiva (apilada)

Active Portals: 0

Alternar (exclusivo)

Active Portal: None

Uso básico (antiguo)

Portal Controls

Content is rendered dynamically into the DOM (typically body) using the HubPortal service, completely detaching it from this component's DOM hierarchy while preserving Angular context.

Posicionamiento avanzado (antiguo)

Portal - Posicionamiento Avanzado

Ejemplos de posicionamiento dinámico y conectado con diferentes estrategias.

Configuración de Posicionamiento
Elementos de Referencia
Top LeftEsquina superior izquierda
Top RightEsquina superior derecha
CenterElemento central
Bottom LeftEsquina inferior izquierda
Bottom RightEsquina inferior derecha
Targets de Portal
Target 1
Target 2
Target 3
Configuración Actual
Posición: absolute
Target: body
Offset: X: 0px, Y: 0px
Backdrop: No

Servicio e inyección (antiguo)

Portal - Servicio y Gestión Programática

Creación y gestión de portales usando servicios para casos de uso avanzados.

Gestión Programática de Portales
Notificaciones Toast
Modales Dinámicos
Overlays Complejos
Gestión Global
Estado del Sistema de Portales
Portales Activos:0
Último Portal:Ninguno
Z-Index Actual:1000
Auto-increment ID:1