Dragula Angular2 update values using observable

Question

I am writing a tree control using Angular2 and ng2-dragula (based on dragula). I am currently using something very similar to the example nested repeat example here. I have no problem loading in my list and getting drag and drop to work as expected. What I need to do is click a button, go back to the http service get fresh data, then update data on page. I know that I can use javascript to find the id and update that way but it doesn't seem like the correcy way to handle it.

Here is my component code - All this does is just over write the view data and completey undo any drags changed etc (im sure that is by design). I have tried a bunch of different different ways to use dragulaModel, but no matter what the whole component is re-rendered no matter what happens. I need to be able just to update the child text

I'm new to angular and want to make sure i follow the correct patterns

item.component.ts
loadItems(){
        this._itemsService.getIems();

}
reloadIems(){
    this._itemsService.getItems();

}

item.component.html
<div *ngIf="items">
    <div class="holder">
        <div *ngFor="let item of items | async">
            <div  (click)="checkCollapsed(item.text)"  > 
                <div   *ngIf='item.children'  [dragula]='"first-bag"'> 
                    <div *ngFor='let child of item.children' class="item">
                        <span class="handle">+</span><span id='{{child.id}}'  [innerHtml]="child.text"> </span>
                    </div>
                </div>
            </div>
        </div>  
    </div>
</div>

Edit If I add a .subscribe to loadItems() then update this.items manually like this.items[0].children[0].text = "1000" in reloadItems() it works as i would like. Should I be manually updating the whole object this way? Seems like a hack

**Edit 2 ** I managed to get it to work by subscribing in the loadItems() then comparing the 2 objects in reloadItems, then making any necessary changes there. I think due to the subscribe it is autoupdating. Can anyone confirm if im doing it wrong/right (working plnkr here, leaving out the angular dependencies)

Dragula Angular2 update values using observable

0 Answers0