@ivylab/angular-popover v1.5.1

Popover for Angular

Angular popover library. The Popover it is a pop-up box that appears when the user clicks on an element.

Demo

http://ivylab.space/popover

Installation

Install the npm package.

npm i @ivylab/angular-popover
    

Import NgModule:

import { PopoverModule } from '@ivylab/angular-popover';
 
@NgModule({
    imports: [PopoverModule]
}) 

Usage

Use the popover tag for your content:

<popover #myPopover>
    A popover is a light roll made from an egg batter similar to that of Yorkshire pudding.
</popover>

<button [popoverTriggerFor]="myPopover">Show</button>

Or pass your component to the popover:

import {Popover} from './popover';
import {MyComponent} from './my-component';

export class AppComponent {
    constructor(public popover: Popover) { }
    
    showPopover(event){
        this.popover.load({
            event,
            component: MyComponent
        });
    }
}

Specify an $event as an argument to pass element information to the popover:

<button (click)="showPopover($event)">Show</button>

Also pass your component to entryComponents when importing into module:

import {MyComponent} from './my-component';

@NgModule({
    declarations: [MyComponent],
    entryComponents: [MyComponent]
})

Properties

Set default values

Pass your parameters when importing the module:

And pass your parameters when importing the module:

import {PopoverModule, PopoverProperties} from './popover';
const MyDefaultPopoverProperties: PopoverProperties = {
    theme: 'dark'
}
 
@NgModule({
    imports: [ 
        PopoverModule.forRoot(MyDefaultPopoverProperties as PopoverProperties)
    ]
})

Methods

Events

When you call events, the delays that are specified in the options in the directive are taken into account. Default delay before tooltip hiding is 300 milliseconds.