ngx-popper

ngx-popper is an angular wrapper for the Popper.js library.

Installation

node and npm are required to run this package.

1. Use npm/yarn to install the package:

$ npm install ngx-popper --save 

Or

 $ yarn add ngx-popper --save 

2. You simply add into your module NgxPopperModule:

import {NgxPopperModule} from 'ngx-popper';

@NgModule({
 // ...
 imports: [
   // ...
   NgxPopperModule
 ]
})

SystemJS

    System.config({
        paths: {
            // paths serve as alias
            'npm:': 'libs/'
        },
        // map tells the System loader where to look for things
        map: {
            ... ,
            'ngx-popper': 'npm:ngx-popper',
            'popper-directive.js': 'npm:ngx-popper',
            'popper.module': 'npm:ngx-popper',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            ... ,
            'ngx-popper': {
                main: 'index.js',
                defaultExtension: 'js'
            },
            'popper.js': {
                main: 'popper-directive.js',
                defaultExtension: 'js'
            },
            'popper.module': {
                main: './popper.module.js',
                defaultExtension: 'js'
            }
        }
    });

3. Add to view:

 <div     [popper]="popper1Content"
          [popperShowOnStart]="true"
          [popperTrigger]="'click'"
          [popperPlacement]="'bottom'">
       <p class="bold">Hey!</p>
       <p class="thin">Choose where to put your popper!</p>         
     </div>
     <popper-content #popper1Content>
       <p class="bold">Popper on bottom</p>
     </popper-content>

4. As text:

     <div [popper]="'As text'"
          [popperTrigger]="'hover'"
          [popperPlacement]="'bottom'"
          (popperOnShown)="onShown($event)">
       <p class="bold">Pop</p>
       <p class="thin">on the bottom</p>
     </div>

5. Position fixed, breaking overflow:

     <div [popper]="'As text'"
          [popperTrigger]="'hover'"
          [popperPlacement]="'bottom'"
          [popperPositionFixed]="true"
          (popperOnShown)="onShown($event)">
     </div>

6. Specific target:

<div class="example">
     <div #popperTargetElement></div>
     <div [popper]="'As text'"
          [popperTrigger]="'hover'"
          [popperPlacement]="'bottom'"
          [popperTarget]="popperTargetElement"
          (popperOnShown)="onShown($event)">
     </div>

7. hide/show programmatically:

 <div [popper]="tooltipcontent"
         [popperTrigger]="'hover'"
         [popperPlacement]="'bottom'">
      <p class="bold">Pop</p>
      <p class="thin">on the bottom</p>
    </div>
    <popper-content #tooltipcontent>
      <div>
        <p>This is a tooltip with text</p>
        <span (click)="tooltipcontent.hide()">Close</div>
      </div>
    </popper-content>

8. Attributes map:

   | Option | Type | Default | |:------------------- |:---------------- |:-------- | | popperDisableAnimation | boolean | false | | popperDisableStyle | boolean | false | | popperDisabled | boolean | false | | popperDelay | number | 0 | | popperTimeout | number | 0 | | popperTimeoutAfterShow | number | 0 | | popperPlacement | Placement(string) | auto | | popperTarget | HtmlElement | auto | | popperBoundaries | string(selector) | undefined|
   | popperShowOnStart | number | 0 |
   | popperTrigger | Trigger(string) | hover | | popperPositionFixed | boolean | false | | popperHideOnClickOutside | boolean | true | | popperHideOnScroll | boolean | false | | popperForceDetection | boolean | false | | popperModifiers | popperModifier | undefined| | popperOnShown | EventEmitter| $event |
   | popperOnHidden | EventEmitter| $event |

9. Override defaults:

   Ngx-popper comes with a few default properties you can override in default to effect all instances These are overridden by any child attributes.

NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    NgxPopperModule.forRoot({placement: 'bottom'})],
  declarations: [AppComponent],
  providers: [],
  bootstrap: [AppComponent]

})

| Options | Type | Default | |:------------------- |:---------------- |:-------- | | disableAnimation | boolean | false | | disableDefaultStyling | boolean | false |
| placement | Placement(string) | auto | | boundariesElement | string(selector) | undefined|
| trigger | Trigger(string) | hover |
| popperModifiers | popperModifier | undefined| | positionFixed | boolean | false | | hideOnClickOutside | boolean | true | | hideOnScroll | boolean | false |

10. popperPlacement:

| 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'bottom-start' | 'left-start' | 'right-start' | 'top-end' | 'bottom-end' | 'left-end' | 'right-end' | 'auto' | 'auto-top' | 'auto-bottom' | 'auto-left' | 'auto-right' | Function

11. popperTrigger:

| 'click' | 'mousedown' | 'hover' | 'none'

Demo

Demo

Contribute

Hell ya!!!

  $ yarn install
  $ yarn run build
  $ yarn run dev