Drag and drop with Dragula on Angular

Question

necessary to drag-and-drop the block using the Dragula library. Library version 1.5.0 is used.I get error Angular: Can't bind to 'dragula' since it isn't a known property of 'div'.. How to implement block dragging?

shared.module.ts:

import {DragulaModule} from 'ng2-dragula/ng2-dragula';
@NgModule({
  declarations: [
    ...COMPONENTS,
    ...PAGES
  ],
  imports: [
    DragulaModule,
    ...
  ]
})

export class SharedModule {
}

item.component.html:

<div [dragula]='"items"' [dragulaModel]="items.controls"  formArrayName="items">
  <input-container [formGroupName]="i"  *ngFor="let item of items.controls">
     <input formControlName="name"/>
  </input-container>
</div>

Answer 1

Try changing your module imports from:

imports: [
    DragulaModule,
    ...
  ]

into

imports: [
    DragulaModule.forRoot(),
    ...
  ]

and try to change reference from import {DragulaModule} from 'ng2-dragula/ng2-dragula'; into import { DragulaModule } from 'ng2-dragula';

Also make sure in your component.ts you had already import:

import { DragulaService } from 'ng2-dragula';

and put:

@Component({..
   providers: [DragulaService]
....})