CngxPopoverPanel

ComponentPrimaryOnPushNo encapsulationv0.1.0WCAG AA

projects/common/popover/popover-panel.component.ts

Import#

import { CngxPopoverPanel } from '@cngx/common/popover'

Description#

Rich popover panel molecule with header/body/footer slots, variant styling, arrow, close button, and content state templates.

Composes CngxPopover via hostDirectives - all popover inputs (placement, offset, closeOnEscape, mode, exclusive, cngxPopoverOpen) are forwarded.

The variant input is a free-form string mapped to a CSS class (cngx-popover-panel--{variant}). Five variants are pre-themed in popover-panel-theme.scss: default, info, warning, danger, success. Add custom variants via CSS.

Basic with header/body/footer

<button [cngxPopoverTrigger]="panel" (click)="panel.popover.toggle()">Menu</button>
<cngx-popover-panel #panel variant="danger" [showClose]="true" [showArrow]="true">
  <span cngxPopoverHeader>Delete Item?</span>
  <p cngxPopoverBody>This action cannot be undone.</p>
  <div cngxPopoverFooter>
    <cngx-popover-action role="dismiss">Cancel</cngx-popover-action>
    <cngx-popover-action role="confirm" [action]="delete" variant="danger">
      Delete
    </cngx-popover-action>
  </div>
</cngx-popover-panel>

With loading state

<cngx-popover-panel [loading]="isLoading()" [error]="loadError()">
  <p cngxPopoverBody>Loaded content here</p>
  <ng-template cngxPopoverLoading>Loading...</ng-template>
  <ng-template cngxPopoverError let-err>Failed: {{ err }}</ng-template>
</cngx-popover-panel>

https://cngxjs.github.io/cngx/examples/#/common/popover/popover-panel/content-states https://cngxjs.github.io/cngx/examples/#/common/popover/popover-panel/variants https://cngxjs.github.io/cngx/examples/#/common/popover/popover-panel/with-footer-actions

Metadata#

Selector: cngx-popover-panel
Export as: cngxPopoverPanel
Change detection: ChangeDetectionStrategy.OnPush
Encapsulation: ViewEncapsulation.None
Style URLs: ./popover-panel.component.css
Implements: CngxPopoverArrowBounds
Imports: NgTemplateOutlet CngxCloseButton
Host directives: CngxPopover
inputs placement positionTryFallbacks offset closeOnEscape mode exclusive cngxPopoverOpen

Host#

Static attributes: [class]hostClass()
[attr.role]role()
[attr.aria-labelledby]headerId
[attr.aria-describedby]ariaDescribedBy()
[attr.aria-busy]effectiveLoading() || null

Providers#

CNGX_POPOVER_ARROW_BOUNDS: useExisting CngxPopoverPanel

Dependencies#

CngxPopoverinject()selfpopover

The underlying popover state machine.

Relationships

Used by2

componentCngxBreadcrumbOverflowDrop-in overflow menu for {@link CngxBreadcrumbBar}.

componentCngxBreadcrumbSiblingsPer-crumb lateral-navigation dropdown for a hand-composed breadcrumb trail.

Depends on3

NgTemplateOutletdependency

CngxCloseButtonStandalone component

CNGX_POPOVER_ARROW_BOUNDSservice

Index#

Inputs#

empty#

input()

Whether the panel content is empty. Fallback when [state] is not set.

default false

error#unknown

input()

Error value when content loading failed. Fallback when [state] is not set.

loading#

input()

Whether the panel content is in a loading state. Fallback when [state] is not set.

default false

role#PopoverPanelRole

input()

ARIA role applied to the panel host. Defaults to 'dialog' because the panel pairs aria-labelledby (header) with aria-describedby (body) - the standard dialog pattern. Override with 'alertdialog' for irrecoverable confirmations, 'tooltip' for passive callouts, or 'menu' when the panel hosts a menu.

The trigger's aria-haspopup is hinted to 'dialog' in tandem via the popover's haspopup signal; consumers overriding role here should also override haspopup on the trigger to match.

default 'dialog'

showArrowInput#boolean | undefined

input()

Show an arrow. Falls back to global config from providePopoverPanel(withArrow()).

default undefined, { alias: 'showArrow' }

showCloseInput#boolean | undefined

input()

Show a close button. Falls back to global config from providePopoverPanel(withCloseButton()).

default undefined, { alias: 'showClose' }

state#CngxAsyncState | undefined

Bind an async state - drives loading, error, and empty slots from a single source. When set, takes precedence over individual [loading], [error], [empty] inputs.

variant#string | undefined

input()

Variant string - mapped to CSS class cngx-popover-panel--{variant}. Pre-themed: default, info, warning, danger, success. Add custom variants via CSS.