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.
API reference
Here's the full contract for portal: everything you can bind, listen to, project and theme, gathered in one place. Wire up what you need and style what you want — it's standalone and signal-friendly.
Inputs
Dial portal in with 15 inputs. Bind them like any Angular @Input.
| Name | Type | Default | Description |
|---|---|---|---|
animation | boolean | — | If true, portal opening and closing will be animated. Default: true |
ariaLabelledBy | string | — | `aria-labelledby` attribute value to set on the portal window |
ariaDescribedBy | string | — | `aria-describedby` attribute value to set on the portal window |
beforeDismiss | () => boolean | Promise<boolean> | — | Callback right before the portal will be dismissed. Return false to prevent dismissal. |
container | string | HTMLElement | — | A selector specifying the element all new portal windows should be appended to. If not specified, will be `body`. |
injector | Injector | — | The `Injector` to use for portal content to enable dependency injection. |
keyboard | boolean | — | If true, the portal will be closed when Escape key is pressed. Default: true |
scrollable | boolean | — | Scrollable portal content (false by default). |
windowClass | string | — | A custom class to append to the portal window for custom styling and positioning. |
portalDialogClass | string | — | A custom class to append to the portal dialog container. |
portalContentClass | string | — | A custom class to append to the portal content wrapper. |
headerSelector | string | — | Custom selector for the header element of the portal window. Useful for targeting specific portal sections. |
footerSelector | string | — | Custom selector for the footer element of the portal window. Useful for targeting specific portal sections. |
dismissSelector | string | — | Custom selector for elements that can trigger the dismissal of the portal window. Default: `[data-dismiss="portal"]` |
closeSelector | string | — | Custom selector for elements that can trigger the closing of the portal window. Default: `[data-close="portal"]` |
Outputs
No outputs documented yet.
Templates
Make it yours — 1 template slots let you project custom markup.
| Name | Description | Example |
|---|---|---|
Portal Template | Template reference that can be passed to the HubPortal service for dynamic rendering | <ng-template #portalTemplate>
<div class="portal-content">
<div class="portal-header">
<h4>Portal Title</h4>
<button data-dismiss="portal">×</button>
</div>
<div class="portal-body">
Portal content goes here
</div>
<div class="portal-footer">
<button data-dismiss="portal">Cancel</button>
<button data-close="portal">OK</button>
</div>
</div>
</ng-template>
<!-- Open the portal -->
<button (click)="portal.open(portalTemplate)">Open Portal</button> |
CSS variables
Theme every pixel with 15 CSS variables. Override them at :root or scope them to a wrapper.
Portal Base Variables
Core styling variables for portal structure and positioning
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-zindex | 1050 | number | Z-index of the portal overlay |
--portal-padding | 1rem | length | Default padding for portal content |
--portal-margin | 0.5rem | length | Margin around portal dialog |
Portal Appearance
Variables controlling portal colors, borders, and visual effects
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-bg | #ffffff | color | Background color of portal content |
--portal-color | #212529 | color | Text color of portal content |
--portal-border-color | #dee2e6 | color | Border color of portal |
--portal-border-width | 1px | border | Border width of portal |
--portal-border-radius | 0.375rem | border | Border radius of portal corners |
--portal-box-shadow | 0 0.5rem 1rem rgba(0, 0, 0, 0.15) | shadow | Box shadow for portal elevation |
Portal Header & Footer
Styling variables for portal header and footer sections
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-header-padding | 1rem | length | Padding of portal header |
--portal-header-border-color | #dee2e6 | color | Border color of portal header |
--portal-footer-padding | 1rem | length | Padding of portal footer |
--portal-footer-border-color | #dee2e6 | color | Border color of portal footer |
Backdrop & Overlay
Variables controlling backdrop appearance and behavior
| Variable | Default | Type | Description |
|---|---|---|---|
--portal-backdrop-bg | rgba(0, 0, 0, 0.5) | color | Background color for portal backdrop |
--portal-backdrop-zindex | 1040 | number | Z-index of the backdrop (must be lower than portal z-index) |
Styling and theming
No styling examples are documented yet. This section will include customization recipes and theming examples.