Introduction

ngx-builder-dnd is a directive-driven drag-and-drop engine created for Angular. It allows you to create anything from basic reorderable lists to sophisticated editors, nested builders, dashboards, and custom layout systems, all built around the conventions that Angular developers are already familiar with.

The library's main focus is on directives, which gives you complete control over your user interface's interactions, templates, and structure. You provide your own styling and componentry. The drag-and-drop logic underneath them is merely powered by ngx-builder-dnd. Example components are included only as learning references, not as required.

The library's foundation is Pragmatic Drag and Drop, which exposes reactive events, actions, and extension points in an Angular-friendly manner. This allows for deeper customization when necessary, while still providing you with a clear, declarative API.

Using ngx-builder-dnd, you get:

• Directive-first architecture which keeps templates clean and avoids boilerplate
• Full UI freedom, allowing you to shape the structure and styling of your builder
• Reactive events and extensibility, making it suitable for complex, nested, or dynamic layouts
• A clear mental model, backed by minor helper components and patterns to guide implementation

ngx-builder-dnd offers the drag-and-drop tools for creating page builders, editors, dashboards, and other interactive layouts so you can concentrate on your application rather than its technical aspects.