Portal и рендеринг оверлеев для Angular | ng-hub-ui-portal

Библиотека portal для Angular для динамического рендеринга компонентов, шаблонов и оверлеев вне текущего дерева DOM с контролем позиционирования.

Интерактивные примеры

Изучите живые примеры, показывающие, как библиотека ведёт себя в типичных сценариях использования Angular.

Рендеринг компонента

Component Rendering

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

Рендеринг TemplateRef

TemplateRef Rendering

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

Строковое содержимое

String Content Rendering

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

Передача данных

Data Passing

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

Проекция контента

Content Projection

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

Прогрессивное открытие (стопкой)

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

Переключение (эксклюзивное)

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

Базовое использование (старое)

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.

Продвинутое позиционирование (старое)

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

Сервис и внедрение (старое)

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