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