vitaliy-bobrov / angular-popper

Popover component for Angular 2+ based on Popper.js library.

angular-popper

Popover component for Angular 2+ based on Popper.js library.

Demo

Installation

• Angular CLI > v6.0.0: ng add angular-popper

• yarn: yarn add popper.js angular-popper

• npm: npm install --save popper.js angular-popper

Usage

Import NgxPopper module

...
import { NgxPopper } from 'angular-popper';

@NgModule({
  ...
  imports: [
    NgxPopper
  ]
  ..
})
export class AppModule {}

Use in template

<angular-popper>
  <div class="target-block border border-primary">
    Target
  </div>

  <div content>Popper content</div>
</angular-popper>

Input properties

show: boolean

Default: true

Specify if popper visible.

target?: string | Element

Specify popper element target, accepts HTMLElement reference or CSS selector.

closeButton: boolean

Default: false

Specify if popper should contain close button.

placement: Popper.Placement

Default: 'bottom'

Specify popper placement.

positionFixed: boolean

Default: false

Specify if popper should has fixed position.

eventsEnabled: boolean

Default: true

Specify if popper should listen for scroll & resize events.

modifiers?: Popper.Modifiers

Popper.js modifiers object, details.

Events

close

Fires on popper close button click.