get model by html element in angular2

I need to access the model by the html element in angular2. In my case I use ng2-dragula to perform drag and drop and its service only has access to the html elements that are dragged. And I need to update the corresponding model of the element. Heres the issue at github.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

You can get the model of your item by searching for the index of the element in the elementList provided by the arguments of the subscription. dragulaService.drop.subscribe(e => this.onDrop(e.slice(1))); See? UPDATE: Simplification (Thanks to Dracco) private onDrop(args) { let [e, el] = args; //element, elementList let i = el.children.indexOf(e), item = i+1? this.items[i] : null; console.log(item); //The item } this.items is the variable where you store the list you pass to dragula. (e.g: [dragulaModel]="items"). I wish there was a simpler way. Tell me if you find one! Old way: private onDrop(args) { let [e, el] = args; //element, elementList let… Read more »

Jason
Guest

If your ngFor is compiled from an array, you need to provide model by setting the dragulaModel attribute on the bag element.

<ul [dragula]='"bag-one"' [dragulaModel]='items'>
<li *ngFor="let item of items"></li>
</ul>

And whenever you re-position the items, the model will be synced. In your component, you can easily get the updated model by doing this.

this.dragulaService.drop.subscribe((value) => {
        //let [bagName, e, el] = value;
        console.log(this.items);
    });

You will notice that the items are re-positioned in your model.

Jason
Guest

Make sure to wrap el.children in a ES6 Array.

let i = el.children.indexOf(e)

Should be

let i = Array.from(el.children).indexOf(e)

I also found that retrieving the child element with the index from the parent list produced unpredictable results and sometimes generated new undefined items.

Alternative Direct ID Solution:

<ion-item *ngFor="let child of children" [id]="child"></ion-item>

and then in the onDrop method

console.log(e.id);