@diningcity/ngx-grid-drag-and-drop

• English

Welcome to the Angular Grid Drag and Drop plug in

This repository is a fork of the awesome @sam-1994/ngx-drag-and-drop-grid.

This drag and drop plug in takes the same features as the previous plug in, but updated with Angular 10+ support.

Table of contents

• Installing
• Usage
• API

Installing

To install from the command line:

npm install @diningcity/ngx-grid-drag-and-drop

Usage

1. Import the SamDragAndDropGridModule:

Finally, you can use ngx-translate in your Angular project. You have to import SamDragAndDropGridModule in the NgModule.

import {BrowserModule} from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {SamDragAndDropGridModule} from '@diningcity/ngx-grid-drag-and-drop';

@NgModule({
    imports: [
        BrowserModule,
        SamDragAndDropGridModule
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

2. Use the component:

import {Component, OnInit} from '@angular/core';
import {SamDragAndDropGridModule} from 'drag-and-drop-grid-module';

@Component({
  selector: 'app-drag-and-drop-grid-example',
  templateUrl: './drag-and-drop-grid.component.html',
  styleUrls: ['./drag-and-drop-grid.component.sass']
})
export class SamDragAndDropGridExampleComponent implements OnInit {

  public list = [1, 2, 3, 4, 5, 6, 7, 8, 9];

  ngOnInit() {
  }
}

<sam-drag-and-drop-grid [items]="list" [columnNumber]="5">
  <div *samDragAndDropListData="let listItem; let i=index">
    Item {{listItem}}; Index {{i}}
  </div>
</sam-drag-and-drop-grid>

API

You can use the samDragAndDropListData directive to inject your custom template as grid items.