Angular Portal and Overlay Rendering | ng-hub-ui-portal
Angular portal library for dynamic component, template and overlay rendering outside the current DOM tree with positioning control.
Interactive examples
Explore live examples that show how the library behaves in common Angular use cases.
Component Rendering
TemplateRef Rendering
String Content
Data Passing
Content Projection
Progressive Open (Stacked)
Active Portals: 0
Toggle (Exclusive)
Active Portal: None
Basic Usage (Old)
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.
Advanced Positioning (Old)
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
Service & Injection (Old)
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