A simple, highly customizable, and powerful modal dialog library for Angular applications.
Ngneat Dialog is a modal dialog library built for Angular applications. It provides a simple yet powerful way to create, customize, and manage modal windows using Angular components or templates. It solves the problem of implementing flexible, feature-rich modals with minimal boilerplate code.
Angular developers building applications that require modal dialogs, such as admin dashboards, data entry forms, or interactive user interfaces.
Developers choose Ngneat Dialog for its balance of simplicity and advanced features like drag-and-drop, resizing, and guard support, all while maintaining full Angular integration and type safety.
👻 A simple to use, highly customizable, and powerful modal for Angular Applications
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Supports both Angular components and TemplateRef, allowing choice between reusable components for complex logic and inline templates for quick prototypes, as shown in the usage examples.
Includes dialog guards with boolean, observable, or promise support for conditional closure, plus resizable and draggable modals with configurable constraints like 'bounce' or 'constrain'.
Provides observables such as afterClosed$ and backdropClick$ for seamless integration with Angular's reactive patterns, simplifying state management after modal interactions.
Offers global and per-instance configuration for size, styling, and behavior, including custom CSS classes and size presets, enabling fine-tuned control over modal appearance.
Requires manual CSS work using provided classes like '.ngneat-dialog-backdrop', lacking pre-designed themes or default styles, which can increase development time for teams wanting drop-in aesthetics.
Setting up global providers via provideDialogConfig and managing instance options can be verbose, potentially overcomplicating simple use cases compared to more streamlined libraries.
Tightly coupled to Angular's dependency injection and standalone components, making it unsuitable for hybrid projects or those planning to migrate to other frameworks.