Ngx Popper

Overview

ngx-popper is a powerful Angular wrapper for the popular Popper.js library, designed to enhance the usability and functionality of pop-up elements in web applications. With its seamless integration, ngx-popper offers developers the ability to create tooltips, dropdowns, and other overlay elements easily, while benefiting from the robust features of Popper.js. The library's recent updates have streamlined its use, making it even more efficient for Angular developers.

This library is built under the MIT license and includes several noteworthy changes. Notably, with version 6.0.0, it adapts an onPush change detection strategy, thereby improving performance and eliminating the need for manual change detection. Installation is straightforward using npm or yarn, allowing you to quickly incorporate ngx-popper into your projects.

Features

• OnPush Change Detection: As of version 6.0.0, ngx-popper employs the onPush change detection strategy for improved performance.

• InnerHTML Binding: Version 4.0.0 introduces innerHTML binding for popper strings, ensuring compatibility and easing integration.

• Flexible Targeting: You can specify a custom reference element using the popperTarget attribute, providing greater flexibility in positioning poppers.

• Animation Control: The popperDisableAnimation feature allows you to toggle default animations for displaying and hiding poppers.

• Customized Trigger Events: The popperTrigger property enables you to set which events (such as hover or click) will show or hide the popper.

• Delay Options: With options like popperDelay and popperTimeout, you can control the timing of when poppers appear or disappear.

• Boundary Specification: The popperBoundaries attribute allows you to define specific areas within which the popper will be confined, ensuring a tidy user interface.

• Show on Start Option: The popperShowOnStart boolean lets you decide whether the popper should be visible immediately upon loading.