Angular Portal- und Overlay-Rendering | ng-hub-ui-portal

Angular Portal-Bibliothek zum dynamischen Rendern von Komponenten, Templates und Overlays außerhalb des aktuellen DOM-Baums mit Positionierungssteuerung.

Interaktive Beispiele

Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.

Komponenten-Rendering

Component Rendering

Demonstrate how to open a portal with a Component class and access its instance for data manipulation.

TemplateRef-Rendering

TemplateRef Rendering

Demonstrate how to use ng-template to define portal content with context variables.

String-Inhalt

String Content Rendering

Demonstrate how to render simple string or HTML content directly in a portal.

Datenübergabe

Data Passing

Demonstrate how to inject custom data into portal components using Angular's Injector.

Content Projection

Content Projection

Demonstrate how to use ng-content slots for header/footer projection and custom selectors in portal content.

Progressives Öffnen (gestapelt)

Progressive Open (Stacked Portals)

Demonstrate how multiple portals can be opened progressively, each stacking on top of the previous one with proper z-index management.

Active Portals: 0

Umschalten (exklusiv)

Toggle (Exclusive Mode)

Demonstrate how toggle() closes any existing portal before opening a new one, ensuring only one portal is active at a time.

Active Portal: None

Grundlegende Verwendung (alt)

Basic Portal Usage

Demonstrates fundamental portal capabilities including Modals, Tooltips, and Notifications using the HubPortal service.

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.

Erweiterte Positionierung (alt)

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 & Injektion (alt)

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