popover

This library was generated with Nx using floating-ui for Angular apps

Popover component displays content next to the trigger element on mouse click

Note I strongly recommend not using this library until its stable version is released.

Usage

See more information about the properties in the official documentation floating-ui

<button
  #popover
  [ngxPopover]="popoverContent"
  [offset]="10"
  [ngxValue]="true"
>
  Popover
</button>

<ng-template #popoverContent>
  <div class="popover">
    <p>I am popover!</p>
    <button
      (click)="popover.close()"
    >
      Close
    </button>
  </div>
</ng-template>

API

@Input() placement

controls the position of the floating relative to the trigger (docs)

@Input() flip

changes the placement of the floating element to keep it in view (docs)

@Input() shift

shifts the floating element to keep it in view (docs)

@Input() offset

translates the floating element along the specified axes (docs)

@Input() arrow

adds arrow to floating

@Input() arrowPadding

if your floating element has border-radius, this will prevent it from overflowing the corners. (more)

@Input() autoUpdate

updates floating element automatically. Default true

@Input() ngxValue

Show or hide state of popover

@Output() ngxValueChange

the ngxValue changes emitter

@Output() show

emits when popover shows

@Output() hide

emits when popover hides

Configuration

There is a configuration token NGX_POPOVER_CONFIG. Please, use the NgxPopoverConfig class to change the default floating properties.

export const PopoverConfigProvider: Provider = {
  provide: NGX_FLOATING_CONFIG,
  useValue: new NgxPopoverConfig({
    placement: 'top-end',
    arrow: true
  })
};

Sources

Another packages from this library:

• core
• floating
• tooltip
• portal