Angular ポータルとオーバーレイレンダリング | ng-hub-ui-portal
現在の DOM ツリーの外側にコンポーネント、テンプレート、オーバーレイを動的にレンダリングする Angular ポータルライブラリ。位置制御に対応します。
インタラクティブなサンプル
一般的な 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.
切り替え（排他的）
Toggle (Exclusive Mode)
Demonstrate how toggle() closes any existing portal before opening a new one, ensuring only one portal is active at a time.
基本的な使い方（旧）
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
Targets de Portal
Configuración Actual
サービス & インジェクション（旧）
Portal - Servicio y Gestión Programática
Creación y gestión de portales usando servicios para casos de uso avanzados.