angular-popper

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

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-popper
8242.0.13 years ago6 years agoMinified + gzip package size for angular-popper in KB

Readme

angular-popper
Build Status npm version npm
Popover component for Angular 2+ based on Popper.js library.
Demo

Instalation

  • 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.