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.

Methods

Drive portal from code — 5 methods on its programmatic surface.

Name	Signature	Returns	Description
`HubPortal.open`	`open<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Opens a new portal window with the specified content (component type, TemplateRef, or string) and options, and returns a HubPortalRef to control it. Content components can inject HubActivePortal to close or dismiss the portal from inside.
`HubPortal.toggle`	`toggle<C = any, R = any>(content: Type<C> \| TemplateRef<any> \| string, options?: HubPortalOptions): HubPortalRef<C, R>`	`HubPortalRef<C, R>`	Dismisses all currently open portals with the reason 'toggle', waits for them to be fully hidden, and then shows a new portal with the given content and options. Returns the reference to the new portal.
`HubPortal.dismissAll`	`dismissAll(reason?: any): void`	—	Dismisses all currently displayed portal windows with the supplied reason.
`HubPortal.hasOpenPortals`	`hasOpenPortals(): boolean`	`boolean`	Indicates if there are currently any open portal windows in the application.
`HubPortal.activeInstances`	`activeInstances: EventEmitter<HubPortalRef[]>`	`EventEmitter<HubPortalRef[]>`	Event emitter that emits the list of currently open HubPortalRef instances every time a portal is opened or removed.

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>`