GET STARTED

Import

Import only the standalone primitive and directives used by the template.

import {
  NeuralPopover,
  NeuralPopoverTrigger,
  NeuralPopoverClose,
} from '@neural-ng/core/popover';

@Component({ imports: [NeuralPopover, NeuralPopoverTrigger, NeuralPopoverClose] })

Account panel

The trigger owns disclosure semantics while Popover owns state, positioning, dismissal and restoration.

Logical positions

Start and end follow writing direction. The shared positioner flips and clamps the panel inside the viewport.

Controlled state

Two-way bind the Signal model when application state must remain authoritative.

Focus workflow

Focus remains on the trigger by default. Interactive disclosures can explicitly focus the first meaningful field.

Dismiss policy

Outside pointer and Escape dismissal are independent. A close directive provides an explicit path.

<neural-popover [dismissible]="false" [closeOnEscape]="false">
  <button neuralPopoverClose>Explicit close</button>
</neural-popover>

Trigger width

matchTriggerWidth keeps select-like disclosure surfaces aligned without measuring in consumer code.

Unstyled and typed slots

All behavior and structural hooks remain while Tailwind owns the visual layer.

Trigger contract

Use a native interactive trigger. The directive synchronizes aria-controls and aria-expanded.

Roles and labels

dialog and region are opt-in because arbitrary disclosure content needs no universal role. Name either role through ariaLabel or ariaLabelledby.

Focus lifecycle

Default opening keeps trigger focus. Explicit and Escape closes restore it; outside pointer dismissal preserves the newly selected target.

Keyboard

Enter or Space activates a native button trigger. Escape closes only the topmost eligible Popover.

Top layer and RTL

Native Popover avoids clipping, so no appendTo="body" input is needed. Logical start/end placements mirror under RTL.

SSR and hydration

The server renders deterministic closed markup. Top-layer and positioner work begins only in the browser.

Component inputs

Trigger inputs

Outputs

Imperative methods

Directives

Typed class slots

Public types

Legacy aliases

PopoverComponent, PopoverTriggerDirective, PopoverCloseDirective and PopoverInitialFocusDirective remain compatible. New code should use the concise Neural-prefixed exports.

Sizing

Surface

Arrow

Motion