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.

Overview

Why teams search for this library

This Angular portal library helps you render content into overlays or custom containers while keeping data flow and Angular integration predictable.

Install

npm install ng-hub-ui-portal

Jump to

Ideal for

  • drawers
  • floating panels
  • overlay UIs
  • dynamic containers

About portal

ng-hub-ui-portal is useful when Angular interfaces need to detach rendering from the current DOM tree: drawers, floating panels, dynamic containers or overlay-based UI. It gives teams a cleaner foundation for projected content and positioned rendering.

Feature guides

Content Rendering

Support for rendering various content types (Component, TemplateRef, String) with data injection and projection capabilities.

Opening Strategies

Control how portals are opened: progressive (stacked) or exclusive (toggle) modes.

Positioning

Flexible positioning strategies for portals relative to viewport or specific elements.

Overlay Management

Comprehensive backdrop, scroll blocking, and focus management for portal overlays.

Interaction

Close/dismiss portals with results, keyboard support, and custom trigger selectors.

Lifecycle

Lifecycle hooks and event subscriptions for portal state management.

Key features

Render outside the DOM flow

Useful when normal component placement is not enough for overlays, drawers or floating UI.

Dynamic templates and components

Project strings, templates or components into custom containers with Angular-aware data flow.

Strong overlay foundation

A practical base for contextual panels, floating actions and detached rendering patterns.

Recent changes

Version 0.3.3 - 1/7/25, 12:00 AM

added: Initial documentation page creation

Related libraries

ng-hub-ui-modal ng-hub-ui-nav ng-hub-ui-utils