# Popover Popover is exposed as a standalone directive on a trigger element. Pass an `ng-template` with the panel body, toggle it on click by default, and optionally control open state from the parent. ## Import ```ts import { PopoverDirective } from 'ui'; ``` ## Filter panel on a board ```ts import { Component, TemplateRef, signal, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, DividerComponent, PopoverDirective, SwitchComponent } from 'ui'; type FilterKey = 'open' | 'waiting' | 'escalated' | 'mine'; interface FilterOption { key: FilterKey; label: string; hint: string; grouped?: boolean; } @Component({ selector: 'app-popover-filters-demo', standalone: true, imports: [FormsModule, ButtonComponent, DividerComponent, PopoverDirective, SwitchComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `
Customer issues
128 open tickets across billing, onboarding, and support queues.
Filters @if (activeFilterCount() > 0) { {{ activeFilterCount() }} }
@for (chip of activeChips(); track chip) { {{ chip }} } @empty { No filters applied yet. }
Filter issues
Narrow the queue without leaving the board. Changes apply when you confirm.
@for (option of filterOptions; track option.key) { @if (option.grouped) { }
{{ option.label }}
{{ option.hint }}
}
Clear Apply filters
`, }) export class PopoverFiltersDemoComponent { protected filtersTpl = viewChild.required>('filtersTpl'); protected filters: Record = { open: true, waiting: false, escalated: true, mine: false, }; protected readonly filterOptions: FilterOption[] = [ { key: 'open', label: 'Open', hint: 'Issues still in progress' }, { key: 'waiting', label: 'Waiting on customer', hint: 'Blocked on customer reply' }, { key: 'escalated', label: 'Escalated', hint: 'Raised to on-call queue' }, { key: 'mine', label: 'Assigned to me', hint: 'Only tickets owned by you', grouped: true }, ]; protected applied = signal({ ...this.filters }); protected activeFilterCount = signal(2); protected activeChips = signal(['Open', 'Escalated']); protected clearFilters(): void { this.filters = { open: false, waiting: false, escalated: false, mine: false }; } protected applyFilters(): void { this.applied.set({ ...this.filters }); const chips: string[] = []; if (this.filters.open) chips.push('Open'); if (this.filters.waiting) chips.push('Waiting on customer'); if (this.filters.escalated) chips.push('Escalated'); if (this.filters.mine) chips.push('Assigned to me'); this.activeChips.set(chips); this.activeFilterCount.set(chips.length); } } ``` ## Placement with fallback ```ts import { Component, TemplateRef, model, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, PopoverDirective, RadioButtonGroupComponent, type PopoverPosition, type RadioButtonItem, } from 'ui'; @Component({ selector: 'app-popover-placement-demo', standalone: true, imports: [FormsModule, ButtonComponent, PopoverDirective, RadioButtonGroupComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `
Use one trigger and switch placement from the control below. The panel keeps the arrow aligned with the side that actually fits in the viewport.
Open panel
Placement preview
Anchored to the trigger on the {{ selectedPosition }} side when space allows.
Popovers are meant for compact panels such as filters, pickers, and quick actions—not one-line hints.
`, }) export class PopoverPlacementDemoComponent { protected placementTpl = viewChild.required>('placementTpl'); protected open = model(false); protected selectedPosition: PopoverPosition = 'bottom'; protected readonly placementItems: RadioButtonItem[] = [ { id: 'top', label: 'Top', value: 'top' }, { id: 'bottom', label: 'Bottom', value: 'bottom' }, { id: 'left', label: 'Left', value: 'left' }, { id: 'right', label: 'Right', value: 'right' }, ]; } ``` ## Assignee picker ```ts import { Component, TemplateRef, computed, signal, viewChild, ChangeDetectionStrategy, } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AvatarComponent, ButtonComponent, DividerComponent, PopoverDirective, SearchComponent, } from 'ui'; interface AssigneeOption { id: string; name: string; role: string; image?: string; initials?: string; } @Component({ selector: 'app-popover-assignee-demo', standalone: true, imports: [ FormsModule, AvatarComponent, ButtonComponent, DividerComponent, PopoverDirective, SearchComponent, ], changeDetection: ChangeDetectionStrategy.Eager, template: `
API rate-limit alert
Owner: {{ selectedAssignee()?.name || 'Unassigned' }}
Assign
@if (selectedAssignee(); as assignee) {
{{ assignee.name }}
{{ assignee.role }}
}
Assign owner
Pick someone from the on-call rotation or search by name.
@for (person of filteredAssignees(); track person.id) { }
Invite teammate
`, }) export class PopoverAssigneeDemoComponent { protected assigneeTpl = viewChild.required>('assigneeTpl'); protected query = ''; protected selectedAssignee = signal(null); protected readonly assignees: AssigneeOption[] = [ { id: 'river', name: 'River Chen', role: 'Platform on-call', image: 'https://i.pravatar.cc/150?img=12', }, { id: 'morgan', name: 'Morgan Kelly', role: 'Support lead', initials: 'MK' }, { id: 'wei', name: 'Wei Zhang', role: 'Billing ops', initials: 'WZ' }, ]; protected filteredAssignees = computed(() => { const query = this.query.trim().toLowerCase(); if (!query) { return this.assignees; } return this.assignees.filter( person => person.name.toLowerCase().includes(query) || person.role.toLowerCase().includes(query), ); }); protected selectAssignee(person: AssigneeOption): void { this.selectedAssignee.set(person); } } ``` ## Controlled column picker ```ts import { Component, TemplateRef, computed, model, viewChild, ChangeDetectionStrategy, } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { ButtonComponent, PopoverDirective, SwitchComponent } from 'ui'; type ColumnKey = 'region' | 'accounts' | 'mrr' | 'owner'; interface ColumnOption { key: ColumnKey; label: string; hint: string; } @Component({ selector: 'app-popover-column-picker-demo', standalone: true, imports: [FormsModule, ButtonComponent, PopoverDirective, SwitchComponent], changeDetection: ChangeDetectionStrategy.Eager, template: `
Revenue by region
Columns ({{ visibleColumnCount() }})
@if (columns.region) { } @if (columns.accounts) { } @if (columns.mrr) { } @if (columns.owner) { } @if (columns.region) { } @if (columns.accounts) { } @if (columns.mrr) { } @if (columns.owner) { }
RegionAccountsMRROwner
DACH 42 €128k Morgan Kelly
Visible columns
Toggle columns on or off. At least one metric should stay visible.
@for (option of columnOptions; track option.key) {
{{ option.label }}
{{ option.hint }}
}
Reset Apply
`, }) export class PopoverColumnPickerDemoComponent { protected columnsTpl = viewChild.required>('columnsTpl'); protected open = model(false); protected columns: Record = { region: true, accounts: true, mrr: true, owner: false, }; protected draft: Record = { ...this.columns }; protected readonly columnOptions: ColumnOption[] = [ { key: 'region', label: 'Region', hint: 'Geography column' }, { key: 'accounts', label: 'Accounts', hint: 'Active customer count' }, { key: 'mrr', label: 'MRR', hint: 'Monthly recurring revenue' }, { key: 'owner', label: 'Owner', hint: 'Account owner name' }, ]; protected visibleColumnCount = computed(() => Object.values(this.columns).filter(Boolean).length); protected resetDraft(): void { this.draft = { ...this.columns }; } protected applyColumns(): void { this.columns = { ...this.draft }; this.open.set(false); } } ``` ## Share and access ```ts import { Component, TemplateRef, signal, viewChild, ChangeDetectionStrategy } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { AvatarComponent, ButtonComponent, DividerComponent, PopoverDirective, SwitchComponent, TagComponent, TextComponent, } from 'ui'; @Component({ selector: 'app-popover-share-demo', standalone: true, imports: [ FormsModule, AvatarComponent, ButtonComponent, DividerComponent, PopoverDirective, SwitchComponent, TagComponent, TextComponent, ], changeDetection: ChangeDetectionStrategy.Eager, template: `
Q2 launch brief
Shared with product, marketing, and customer success.
Share
Last action: {{ lastAction() }}
Share brief
Invite teammates or copy a view-only link for stakeholders outside the workspace.
Send invite Copy link
@if (linkAccessEnabled) { }
People with access
@for (person of collaborators; track person.email) {
{{ person.name }}
{{ person.email }}
}
`, }) export class PopoverShareDemoComponent { protected shareTpl = viewChild.required>('shareTpl'); protected shareLink = 'https://ui.laczynski.dev/docs/popover?share=q2-launch-brief'; protected inviteEmail = ''; protected linkAccessEnabled = true; protected lastAction = signal('Not copied yet'); protected readonly collaborators = [ { name: 'River Chen', email: 'river.chen@northwind.dev', initials: 'RC', role: 'Can edit' }, { name: 'Morgan Kelly', email: 'morgan.k@northwind.dev', initials: 'MK', role: 'Can view' }, ]; protected copyLink(): void { this.lastAction.set('Link copied to clipboard'); } protected sendInvite(): void { const email = this.inviteEmail.trim(); this.lastAction.set(email ? `Invite sent to ${email}` : 'Enter an email address first'); } } ``` ## Accessibility ### Trigger semantics The trigger receives `aria-haspopup="dialog"`, `aria-expanded`, and `aria-controls` while open. Provide `uiPopoverAriaLabel` when the panel heading is not obvious from the trigger alone. ### Keyboard and dismissal Popover panels close on `Escape` and outside pointer interaction. Keep essential instructions visible outside the popover when users must understand the trigger before opening it. | Key / input | Action | | --- | --- | | Click trigger | Toggles the popover when `uiPopoverTrigger` is `click` | | Escape | Closes the open popover | | Outside click | Closes the open popover | ### Popover versus tooltip Use tooltip for short, non-interactive hints. Use popover when the surface needs buttons, inputs, or richer supporting content that users may interact with.