4

Im trying to add drag and drop into my ionic 2 app. But can't get it to work.

This is what I have done so far: 

npm install ng2-dragula dragula --save

then in my page:

@Component({
  templateUrl: 'build/pages/dragtest/dragtest.html',
  directives: [Dragula],
  viewProviders: [DragulaService],
})
export class DragtestPage {
  constructor(private nav: NavController) {
  }
}

But when I add [dragula] tags, I get error: Can't bind 'dragula' since it isn't a know native property.

Did any one get this to work with ionic 2, are there any examples?

Mike Smith
  • 115
  • 6

3 Answers3

0

I think you miss the import statement:

import {DragulaService, Dragula} from 'ng2-dragula/ng2-dragula';

I already tried this but it seems the IDE can't find the directory 'ng2-dragula' (red text in PHP Storm)

Becario Senior
  • 656
  • 10
  • 18
0

I did ;) After installing it import the module and the service in the app.module.ts:

import { DragulaModule, DragulaService } from 'ng2-dragula/ng2-dragula';

then add the module to the imports:

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

and the service to the providers: 

providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, DragulaService]

After that you just have to import the service in the components you will use it:

import { DragulaService } from 'ng2-dragula/ng2-dragula';

and pass it to the constructor:

constructor(private dragulaService: DragulaService ) {}

Finally follow the steps shown here.(only for the template, not the imports )

user3568791
  • 437
  • 5
  • 17
0

i just write a tutorial about how to make latest version ng-dragula work for ionic 2, on ng-dragula github page, they have code example there, but if you just copy and paste wouldn't work, we need to make some little change to make it work.

write a article about it few weeks ago, hope this will help

http://etenbo.com/add-drag-and-drop-on-ionic-2-by-plugin-dragula/

Xiao Xinqi
  • 511
  • 2
  • 7
  • 19