1

I've searched Google for this but none of the "solutions" I've found work, and are from 2016. I had it working fine with 1.x, but now I am trying to follow the migration guide to update to 2.0.

I have a setup like this in the HTML with two Bootstrap cards containing lists:

 <div class="row">
          <div class="col">
            <div class="card">
              <div class="card-header">Fruits</div>
              <div class="card-body">
                <ul [dragula]="firstbag"
                    [(dragulaModel)]="produce.fruits"
                    class="drag-container">
                  <li *ngFor="let item of produce.fruits"
                      class="drag-item">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </div>
          <div class="col">
            <div class="card">
              <div class="card-header">Vegetables</div>
              <div class="card-body">
                <ul [dragula]="firstbag"
                    [(dragulaModel)]="produce.vegetables"
                    class="drag-container">
                  <li *ngFor="let item of produce.vegetables"
                      class="drag-item">{{item.label}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

However, when I try and compile this I am getting:

ERROR in : Can't bind to 'dragula' since it isn't a known property of 'ul'. (" class="card-header">Fruits</div>
              <div class="card-body">
                <ul [ERROR ->][dragula]="firstbag"
                    [(dragulaModel)]="produce.fruits"
                  ")
: Can't bind to 'dragulaModel' since it isn't a known property of 'ul'. ("       <div class="card-body">
                <ul [dragula]="firstbag"
                    [ERROR ->][(dragulaModel)]="produce.fruits"
                    class="drag-container">
               ")

I have imported as describe in my app module:

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

export class AppModule { }

The data for the lists is in my component:

produce = {
  fruits: [
    {
      id: 0,
      label: 'Squash'
    },
    {
      id: 1,
      label: 'Pineapples'
    },
    {
      id: 2,
      label: 'Raspberries'
    }
  ],
  vegetables: [
    {
      id: 3,
      label: 'Carrots'
    }
  ]
};

I have changed the syntax to [(dragulaModel)] in the html, as you can see above.

At this point, I'm lost.

Steve
  • 14,401
  • 35
  • 125
  • 230
  • Can you show us a reproducible example, on jsFiddle? How is connected AppModule to your component where you try to use dragula ? – GarryOne Aug 20 '18 at 18:12
  • 1
    I got it. I had to move the import down 1 level from the app module to the module that my component was part of. It's still confusing to me because some libraries want to be imported at the "top" of the app and some are ok with being imported into sub-modules. – Steve Aug 20 '18 at 18:19
  • in the examples https://valor-software.com/ng2-dragula/ dragula is not between [] – Eliseo Aug 20 '18 at 18:37

0 Answers0