NEURALNG
OVERLAYBETA

Popover

Arbitrary Angular content in a non-modal, trigger-anchored top layer with viewport-aware placement and deterministic focus restoration.

Native top layerLogical positionsSSR safe

GET STARTED

Import

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

app.ts TypeScript 
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.

No Popover interaction yet.

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.

Closed

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.

policy.html HTML 
<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.