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

| name | type | default | description | |------------------|-------------------------------------|---------|---------------------------------------------| | placement | "top", "bottom", "left", "right" | "bottom"| The position of the popover. | | showDelay | number | 300 | The delay in ms before showing the popover. | | hideDelay | number | 100 | The delay in ms before removing the popover.| | width | string | | Popover Width, for example "300px" or "30%".| | height | string | | Popover Height. | | maxWidth | string | | Minimum popover width, for example "300px" or "30%".| | theme | "dark", "light" | "light" | Theme of popover background and text. | | zIndex | number | "bottom"| Popover z-index. | | offset | number | 8 | Indent between the arrow of the popover and the element (in pixels).| | animation | "fade", "upwards" | | Animation of showing and hiding popover. | | animationDuration| number | 100 | The duration of the popover open/close animation.| | animationTimingFunction | "ease", "ease-in", "ease-out", "ease-in-out" | "ease-in-out" | Specifies the speed curve of an animation. | | popoverClass | string, string[] | | Custom classes for popover. | | padding | string | "16px" | Padding for popover content. | | noArrow | boolean | "bottom"| Hide arrow popover. | | whiteSpace | "nowrap", "normal" | "normal"| Controls how whitespace is handled within a popover. | | shadow | boolean | true | Shadow of the popover. | | fontSize | string | | The size of the text inside the popover. | | pointerEvents | "auto", "none" | "none" | Defines whether or not an element reacts to pointer events. | | display | boolean | true | Popover availability for display. |

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

| Method | Description | |------------------|---------------------------------------------------------------------------------------------| | load(properties: PopoverProperties) | Show popover | | close() | Hide popover |

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.

| Event | Description | |------------------|---------------------------------------------------------------------------------------------| | {type: "show"} | The event is called before the popover appears. | | {type: "shown"} | The event is called after the animation of the appearance of the popover. | | {type: "hide"} | The event is called before the popover is hidden. | | {type: "hidden"} | The event is called after the animation of the popover is hidden. |