18.2.0 • Published 10 months ago

@ngx-popovers/popover v18.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
10 months ago

Popover

This library was generated with Nx using floating-ui for Angular apps.

Popover preview

See Demo

The popover is a simple-to-use component with a straightforward API. Just install and use.

Note: You need to install the core package for all functionalities.

Both the core and popover packages have the same versions.

To install, use the following command:

npm i @ngx-popovers/core

The Popover component displays content next to the trigger element on mouse click.

Usage

Refer to the official documentation at floating-ui for more information about the properties.

First, import the popover module:

import { PopoverModule } from '@ngx-popovers/popover';

This module contains all the necessary components. Then, you can use the Popover in your templates.

<ngx-popover>
  <button>
    Toggle Popover
  </button>

  <!-- 
    Angular doesn't destroy elements in <ng-content />, so
    the PopoverTemplate directive is used for conditional content projection.
    
    https://angular.io/guide/content-projection#conditional-content-projection
  -->
  <ng-template ngx-popover-template>
    <div class="example-class">
      <p>
        Lorem ipsum dolor sit amet.
      </p>
    </div>
  </ng-template>
</ngx-popover>

Arrow

To use the Arrow component, you should install the core package.

import { Arrow } from '@ngx-popovers/core';

Example usage:

<ngx-popover>
  <button>
    Toggle Popover
  </button>

  <ng-template ngx-popover-template>
    <div class="example-class">...</div>
  </ng-template>

  <ngx-arrow padding="8" />
</ngx-popover>

ngx-popover-close

The NgxPopoverClose directive closes the popover when a specified element is clicked.

<ngx-popover>
  <button>
    Toggle Popover
  </button>

  <ng-template ngx-popover-template>
    <div class="example-class">
      ...
      <button ngx-popover-close>Close</button>
    </div>
  </ng-template>
</ngx-popover>

ngx-popover-anchor

You can have multiple components inside the <ngx-popover />. By default, the popover handles all user clicks, but it can be changed.

The ngxPopoverAnchor directive can be useful if you want to change the trigger inside <ngx-popover />.

<ngx-popover>
  <p>
    Clicks on this paragraph
    will not trigger the popover.
  </p>

  <button ngx-popover-anchor>
    Anchor
  </button>

  <ng-template ngx-popover-template>
    <div class="example-class">
      ...
    </div>
  </ng-template>
</ngx-popover>

API

Input Parameters

InputDescriptionTypeDefault
placementPopover positionPlacement'bottom'
middlewareList of floating-ui middlewares without arrowMiddlewareListoffset(4), flip()
bindToRender popover into elementstring \| HTMLElement'.body'
autoUpdateAuto update the position of the Popoverbooleantrue
disabledDisable open/close on trigger clicksbooleanfalse
animationDisabledDisable show/hide animationsbooleanfalse
valueShow or hide state of popoverbooleanfalse
strategyThis is the type of CSS position property to useabsolute | fixed | undefinedundefined

Output Parameters

OutputDescriptionType
valueChangeEmitter for changes in valueEventEmitter<boolean>
showEmitter for popover showingEventEmitter
hideEmitter for popover hidingEventEmitter
clickedOutsideEmitter for clicks outside the floating elementEventEmitter<Element>
clickedInsideEmitter for clicks inside the floating elementEventEmitter<Element>
animationStartEmitter for animation startEventEmitter<AnimationEvent>
animationDoneEmitter for animation endEventEmitter<AnimationEvent>
computePositionEmitter for every computePosition callEventEmitter<ComputePosition>

Configuration

Use the NGX_POPOVER_CONFIG token to change default properties with the NgxPopoverConfig class.

import { Provider } from '@angular/core';
import { NGX_POPOVER_CONFIG, NgxPopoverConfig } from '@ngx-popovers/popover';
/**
 * You have to install @ngx-popovers/core to import middleware.
 * Version of @ngx-popovers/core is the same as @ngx-popovers/popover
 */
import { flip, offset, shift } from '@ngx-popovers/core';

export const PopoverConfigProvider: Provider = {
  provide: NGX_POPOVER_CONFIG,
  useValue: new NgxPopoverConfig({
    placement: 'top-end',
    arrow: true,
    closeOnClickedOutside: true,
    /* Middleware list from floating-ui */
    middleware: [
      flip(),
      shift(),
      offset(8)
    ]
  })
};

Add your new provider to any module:

@Component({
  selector: 'example-app-module',
  standalone: true,
  imports: [],
  providers: [
    PopoverConfigProvider
  ],
  template: ``,
})

Arrow component

Refer to the core package

Sources

Another npm packages from this library:

18.2.0

10 months ago

18.1.2

10 months ago

18.1.1

10 months ago

18.1.0

11 months ago

18.0.1

1 year ago

18.0.0

1 year ago

17.0.0

1 year ago

1.0.1

1 year ago

1.0.0

1 year ago

0.1.5

1 year ago

0.1.4

1 year ago

0.1.3

1 year ago

0.1.2

1 year ago

0.1.1

1 year ago

0.1.0

1 year ago

0.0.23

1 year ago

0.0.22

1 year ago

0.0.21

2 years ago

0.0.20

2 years ago

0.0.19

2 years ago

0.0.18

2 years ago

0.0.17

2 years ago

0.0.15

2 years ago

0.0.16

2 years ago

0.0.14

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.11

2 years ago

0.0.10

2 years ago