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'
            }
        }
    });

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

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

   1. Position fixed, breaking overflow:

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

   2. Specific target:

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

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

4. 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<void>| $event |
   | popperOnHidden | EventEmitter<void>| $event |

5. 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. `JavaScript 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
<a href="https://mrfrankel.github.io/ngx-popper/">Demo</a>

### Contribute
  Hell ya!!!

```terminal
  $ yarn install
  $ yarn run build
  $ yarn run dev