ng2-component-popover v1.0.4
ng2-component-popover
An angular2 custom component popover with a bootstrap3 implementation. Focus or click triggering along with programmatic triggering.
DEMO - https://plnkr.co/edit/jiVZozrHLIxmcwXWNOdx?p=preview
install package - npm i ng2-component-popover --save
systemjs
{
"map": {
'ng2-component-popover': 'npm:ng2-component-popover/bundles/ng2-component-popover.umd.js'
}
}
usage
zi-popover - directive for marking an element as the target and assigning target a key
Basic example with programmatic trigger:
<div #target zi-popover="string.key3">
<span>Target3</span>
</div>
import {
PopoverService, PopoverEvent, Action, Location, ZIBootstrap3PopoverComponent,
Bootstrap3Configuration
} from 'ng2-component-popover';
class ComponentOrServiceWithOpenCloseFunctions {
constructor( private popoverService: PopoverService ) {}
open() {
let config = new Bootstrap3Configuration( 'string.key3', 'Popover Title', "Some content", Location.RIGHT, true, 5000 );
this.popoverService.next( 'string.key3', new PopoverEvent( Action.OPEN, ZIBootstrap3PopoverComponent, config ) );
}
close() {
this.popoverService.next( 'string.key3', new PopoverEvent( Action.CLOSE ) );
}
}
Inputs:
zi-popover-trigger="triggerRef" - assign trigger to popover target for event triggering
triggerRef: Trigger = Trigger.CLICK;
Trigger Types
Trigger.CLICK
Trigger.FOCUSED
zi-popover-configuration="configurationRef" - assign configuration to popover target for describing default popover
configurationRef: PopoverConfiguration = new Bootstrap3Configuration( 'string.key3', 'Popover Title', "Popover content string", Location.LEFT, false, 5000 );
Locations
Location.TOP
Location.RIGHT
Location.BOTTOM
Location.LEFT
Bootstrap3Configuration constructor params:
- key - string: key of popover target
- title - string: title of popover
- content - string: content of popover
- location - Location: location of popover
- closer - boolean: should include close button in footer
- duration - number: milliseconds to show popover before closing
zi-popover-ref="popoverRef" - assign target a popover component refrence to use when triggered
Example:
<div #target zi-popover="key.123" [zi-popover-ref]="popoverRef">
<span>Target</span>
</div>
<zi-bootstrap3-popover [target]="targetRef">
<h3>Content that is projected into popover content</h3>
</zi-bootstrap3-popover>
@ViewChild( 'target' )
private targetRef: ElementRef;
@ViewChild( ZIBootstrap3PopoverComponent )
private popoverRef: ZIBootstrap3PopoverComponent;
zi-bootstrap3-popover component as bootstrap3 popover implementation with content projection
<zi-bootstrap3-popover [target]="targetRef">
<span class="btn btn-default" (click)="alertConfig();">Alert Config</span>
</zi-bootstrap3-popover>
demo
demo app shows working click, focus and programmatic popovers as well as a custom hud extension
clone repo - git clone https://github.com/jcapozzi/ng2-component-popover.git
npm install - for developing on module
cd demo => npm install - install demo app
cd demo => npm run start - start demo app lite server
gulp install:demo - to install local changes to demo app instead of using npm published version