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.

Leave a Reply

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

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 »


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>

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;

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


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