Ng2 Bs3 Modal screenshot

Ng2 Bs3 Modal

Author Avatar Theme by Dougludlow
Updated: 27 Feb 2019
259 Stars

Angular Bootstrap 3 Modal Component

Categories

Overview

The ng2-bs3-modal component is a seamless integration of Bootstrap 3 modals with Angular (2+), designed to enhance user interaction within applications. It offers a simple and stylish way to implement modal dialogs, providing developers with the flexibility to create a wide range of modals that can easily blend into their application’s aesthetic. The component comes packed with various customizable features, thus reducing the amount of boilerplate code typically required to create modal dialogs.

This modal component depends on Bootstrap and jQuery, ensuring that developers have a robust framework to work with. By leveraging the capabilities of Angular and Bootstrap, ng2-bs3-modal provides a powerful and efficient solution for any Angular application that requires modal functionality.

Features

  • Animation: Customize the modal’s entry and exit effects by setting the animation property to true (default) or false for instant visibility.
  • Backdrop Options: Offers various backdrop configurations, including a ‘static’ option that prevents closing the modal when clicked.
  • Keyboard Dismissal: The modal can automatically close when the escape key is pressed; this feature can be disabled if needed.
  • Size Variations: Allows you to specify the modal size as ‘sm’ for small or ’lg’ for large, catering to different content requirements.
  • CSS Styling: Implement custom styles through the cssClass property, giving developers the freedom to tailor the modal’s appearance.
  • Events: Emit events for modal open, close, and dismiss actions, providing hooks for additional functionality or logic during these transitions.
  • Promise-Based Methods: Leverage promise-based methods to handle modal visibility, ensuring the execution of code after the modal’s full display or hide has completed.
  • Customizable Footer: Decide whether to show default buttons like ‘Close’ and ‘Dismiss’, and even customize their labels for enhanced user-friendliness.