Get Started

Installation

ngx-builder-dnd is available on the npm registry and works with Angular 15 <= 17.

Install via npm

npm install ngx-builder-dnd@latest

---

Minimal Example: Reorderable List

Once installed, you can create a simple drag-and-drop list that users can reorder.

Import the Module

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DndModule } from 'ngx-builder-dnd';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    AppRoutingModule,
    DndModule
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Component TypeScript

app.component.ts

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { DndTreeItem } from 'ngx-builder-dnd';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass'],
  changeDetection: ChangeDetectionStrategy.OnPush,
})

export class AppComponent {
  list: DndTreeItem[] = [
    { id: '1' },
    { id: '2' },
    { id: '3' },
    { id: '4' },
    { id: '5' },
    { id: '6' },
    { id: '7' },
    { id: '8' },
  ];
}

Component Template

app.component.html

<ngx-drag-list
  [list]="list">
  <ng-template
    [ngxDropListTemplate]="list"
    let-item>
    <div
      [ngxDragDropZone]="item"
      useBrowserPreview
      ngxItemHover
      ngxDropIndicator>
      <div>{{ 'Item ID: ' + item.id }}</div>
    </div>
  </ng-template>
</ngx-drag-list>

Next Steps

Explore the Example for more advanced use cases, or check the API Reference to dive deeper!