Popover for Angular

import { AuiPopover } from '@absoluteui/angular/popover';

Styles are included with the component. Behavior, keyboard and screen-reader support, design tokens, and limitations are described on the Popover page; this page covers the Angular API.

Defaults for every instance: provideAbsoluteUIConfig({ components: { popover: { ... } } }) (see Configuration).

Example

import { Component } from '@angular/core';
import { AuiPopover } from '@absoluteui/angular/popover';
import { AuiButton } from '@absoluteui/angular/button';
import { AuiCheckbox } from '@absoluteui/angular/checkbox';

@Component({
  selector: 'app-toolbar',
  imports: [AuiPopover, AuiButton, AuiCheckbox],
  template: `
    <button type="button" auiButton [auiPopover]="filters" popoverTitle="Filters" popoverPlacement="bottom-start" (closed)="apply()">Filters</button>
    <ng-template #filters><aui-checkbox label="Only active" /></ng-template>
  `,
})
export class ToolbarComponent {
  apply(): void {}
}

[auiPopover]

Class AuiPopover; template reference #ref="auiPopover".

AbsoluteUI Popover on its trigger: <button [auiPopover]="filters" popoverTitle="Filters">Filters</button><ng-template #filters>...</ng-template>. The template is rendered as an embedded view, so its bindings stay live.

Server rendering: Renders in the browser only; on the server the element stays empty.

Inputs

Input	Type	Default	Description
auiPopover	TemplateRef<unknown>		Required. The popover content: an <ng-template> reference.
popoverTitle	string		Visible heading; names the popup through aria-labelledby. Either title or label is required.
popoverLabel	string		aria-label when there is no title.
popoverPlacement	Placement	'bottom-start'	Preferred side and logical alignment; flips and shifts to fit.
popoverOffset	number	'8'	Gap between trigger and popup, px.
closeOnEscape	boolean	true	Escape requests close (cancelable). Escape is consumed while the popover is topmost either way.
closeOnOutsidePointer	boolean	true	Pointer down outside the popup and trigger requests close (cancelable).
initialFocus	PopoverInitialFocus	'first'	Where focus goes on open: first tabbable element (falls back to the container), the popup container, or nowhere.
showCloseButton	boolean	false	Render a localized close button in the header.
direction	"ltr" | "rtl"	'ltr'	Resolves logical start/end placements.
icons	Partial<PopoverIcons>		Icon slot overrides.

Outputs

Output	Payload	Description
(opened)	null	After the popup opened (dispatched on the popup element). Re-emits aui-open.
(cancelled)	PopoverCloseDetail	Before a user-initiated close; preventDefault keeps it open. Re-emits aui-cancel.
(closed)	PopoverCloseDetail	After the popup closed. Re-emits aui-close.

Methods

Call them through a viewChild query or a template reference.

Method	Description
open(): void	Show the popover.
close(): void	Hide the popover; focus returns to the trigger.
toggle(): void	Show the popover when hidden, hide it when shown.