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.

Demo

Usage

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

<button
  #popover
  [ngxPopover]="popoverContent"
  [ngxValue]="true"
  [disabled]="false"
  [animationDisabled]="false"
  [closeOnClickedOutside]="false"
  bindTo=".body"
  arrow
>
  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() middleware

list of middleware from floating-ui

@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() bindTo

renders floating element as last child of bindTo. Default is body.

@Input() disabled

disables open/close on the trigger clicks

@Input() animationDisabled

disables show/hide animations

@Input() ngxValue

Show or hide state of popover

@Output() ngxValueChange

the ngxValue changes emitter

@Output() show

emits when the popover shows

@Output() hide

emits when the popover hides

Configuration

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

import { Provider, flip, shift, offset } from '@angular/core';
import { NGX_POPOVER_CONFIG, NgxPopoverConfig } from '@ngx-popovers/popover';

export const PopoverConfigProvider: Provider = {
  provide: NGX_POPOVER_CONFIG,
  useValue: new NgxPopoverConfig({
    placement: 'top-end',
    arrow: true,
    closeOnClickedOutside: true,
    /* Middleware list from floating-ui */
    middleware: [
      flip(),
      shift(),
      offset(8),
    ]
  })
};

Sources

Another packages from this library:

• core
• tooltip