diff --git a/README.md b/README.md index 9a1cabb..1f82078 100644 --- a/README.md +++ b/README.md @@ -103,7 +103,25 @@ SystemJS ``` -5. Attributes map: + 5. Specific target: + ```HTML +
Pop
+on the bottom
+Hey!
Choose where to put your popper!
diff --git a/example/app/app.component.ts b/example/app/app.component.ts index 9c0c62c..56b9219 100644 --- a/example/app/app.component.ts +++ b/example/app/app.component.ts @@ -1,7 +1,7 @@ import {Component, ElementRef, ViewEncapsulation, OnInit, ViewChild} from '@angular/core'; import {PopperContent} from '../../src/popper-content'; import set = Reflect.set; -import {PopperController} from '../../src/popper'; +import {PopperController} from '../../src/popper-directive'; /** * This class represents the main application component. */ diff --git a/example/app/index.ts b/example/app/index.ts index 3b3855f..6c0a515 100644 --- a/example/app/index.ts +++ b/example/app/index.ts @@ -7,8 +7,6 @@ import '@angular/forms'; import '@angular/platform-browser'; import '@angular/platform-browser-dynamic'; import 'rxjs'; -import 'popper.js/dist/umd/popper.js'; -import 'popper.js/dist/umd/popper-utils.js'; import { enableProdMode } from '@angular/core'; // The browser platform with a compiler diff --git a/package.json b/package.json index 817fd29..8bb07c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ngx-popper", - "version": "1.3.0", + "version": "1.4.0", "description": "ngx-popper is an angular wrapper for popper.js", "main": "src/index.js", "module": "esm/index.js", diff --git a/src/index.ts b/src/index.ts index d95151f..9e3ca28 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,5 +1,5 @@ import 'popper.js'; -export * from './popper'; +export * from './popper-directive'; export * from './popper.model'; export * from './popper-content'; export * from './popper.module'; \ No newline at end of file diff --git a/src/popper-directive.ts b/src/popper-directive.ts index 922990d..89de91c 100644 --- a/src/popper-directive.ts +++ b/src/popper-directive.ts @@ -44,6 +44,9 @@ export class PopperController implements OnInit, OnChanges { @Input('popperTrigger') showTrigger: Trigger; + @Input('popperTarget') + targetElement: HTMLElement; + @Input('popperDelay') showDelay: number = 0; @@ -136,7 +139,7 @@ export class PopperController implements OnInit, OnChanges { this.content.text = text; } const popperRef = this.content as PopperContent; - popperRef.referenceObject = this.getElement(); + popperRef.referenceObject = this.getRefElement(); this.setContentProperties(popperRef); if (this.showOnStart) { @@ -169,7 +172,7 @@ export class PopperController implements OnInit, OnChanges { this.shown = true; const popperRef = this.content as PopperContent; - const element = this.getElement(); + const element = this.getRefElement(); if(popperRef.referenceObject !== element){ popperRef.referenceObject = element; } @@ -212,8 +215,8 @@ export class PopperController implements OnInit, OnChanges { }, delay) } - getElement() { - return this.viewContainerRef.element.nativeElement; + getRefElement() { + return this.targetElement || this.viewContainerRef.element.nativeElement; } private overrideShowTimeout() { diff --git a/src/popper.module.ts b/src/popper.module.ts index ad5e937..0170552 100644 --- a/src/popper.module.ts +++ b/src/popper.module.ts @@ -1,6 +1,6 @@ import {CommonModule} from "@angular/common"; import {NgModule} from "@angular/core"; -import {PopperController} from './popper'; +import {PopperController} from './popper-directive'; import {PopperContent} from './popper-content'; @NgModule({