Popover

Display arbitrary content inside floating panels.

Import

Import the Popover primitives from ng-primitives/popover.

import { NgpPopover } from 'ng-primitives/popover';

Usage

Assemble the popover directives in your template.

<button [ngpPopoverTrigger]="popover">Click me</button>

<ng-template #popover>
  <div ngpPopover>Popover content</div>
</ng-template>

API Reference

The following directives are available to import from the ng-primitives/popover package:

NgpPopover

Apply the ngpPopover directive to an element that represents the popover. This typically would be a div inside an ng-template.

• Selector: [ngpPopover]
• Exported As: ngpPopover

NgpPopoverTrigger

Apply the ngpPopoverTrigger directive to an element that triggers the popover to show.

• Selector: [ngpPopoverTrigger]
• Exported As: ngpPopoverTrigger

Define the content of the popover. This should be reference to an `ng-template`. Define the open state. Event emitted when the state changes. Define the offset from the trigger element. Define the disabled state. Define the placement of the popover. Define the delay before the popover shows. Define the delay before the popover hides. Define if the popover should flip when it reaches the edge of the viewport. Define the container element for the popover. This is the document body by default. Define whether the popover should close when clicking outside of it.

Data Attributes

Attribute	Description	Value
data-state	The state of the popover.	closed | closing | open | opening
data-disabled	Applied when the popover is disabled.	-

Global Configuration

You can configure the default options for all popovers in your application by using the provideNgpPopoverConfig function in a providers array.

import { provideNgpPopoverConfig } from 'ng-primitives/popover';

bootstrapApplication(AppComponent, {
  providers: [
    provideNgpPopoverConfig({
      offset: 4,
      placement: 'top',
      showDelay: 0,
      hideDelay: 0,
      flip: true,
      container: document.body,
      closeOnOutsideClick: true,
    }),
  ],
});

NgpPopoverConfig

Define the offset from the trigger element. Define the placement of the popover. Define the delay before the popover shows. Define the delay before the popover hides. Define if the popover should flip when it reaches the edge of the viewport. Define the container element for the popover. This is the document body by default. Define whether the popover should close when clicking outside of it.