ng2-dragula [usage question] using ng2-dragula with angular material nested tree

[X] My issue title starts with [usage question]
[X] I have thoroughly read through the README, and I have looked at the demos to see if my use case has obvious examples.
[X] I have read the dragula docs.
[X] I have searched through the ng2-dragula issues for related problems, including closed issues, and I didn't find anything. And even on stackoverflow:)
[X] I have browsed through the issues labeled "future reference".

Use case description

I want drag and drop children elements of nested tree. Now in my example I can move elements of root array in nested tree (<mat-nested-tree-node> block). I am just add dragula="menuItems" to base div (<mat-tree>) and it works. But mat nested tree used ng-container with special directive, which I suppose affect on dragula behavior. Now I am adding dragula="children" to div which display elements with children and to div displays role="treeitem", but ofcourse this causes deceptive success behavior because this allows drag and drop inside <li> element only... So, how can I move children elements even without dragulaModel? Any ideas?

Here you can see example of nested mat tree with my ng2-dragula usage attempt

Try it here

Additional context

I also have tried dragulaService createGroup at commented code (line 127 tree-nested-overview-example.ts) but useless..

I suppose that this line <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)"> (line 20 in tree-nested-overview-example.html) should be a container, but this doesnt' work <ul [class.example-tree-invisible]="!nestedTreeControl.isExpanded(node)" dragula="children"> (doesn't show children at all)

I also have tried to use this <div matTreeNodeOutlet dragula="children"></div> instead of line 21 in tree-nested-overview-example.html but it still doesn't have desirable behavior because I can put child in the same line of another child.

Please help! I don't like bother people, but I'm desperate :)

P.S. Hope this time my template is well :)

Jul 30 '18 04:07 furevor

I am facing the same issue, hopefully there will be a way to solve this.

Jul 30 '18 11:07 ArmelaGjoka

I tried it out by putting dragula="xxx" on the 'render children' <ul> instead, which would be the logical place to put it. Your try on StackBlitz ~~~seems like you don't quite understand this~~~ (sorry, read your issue again -- you got it, but tried everything for good measure!): you must put the dragula="..." directive on the container element you want to drag items in and out of, and it must be the direct parent in the DOM.

You also need a dragula directive on the mat-tree, because there is no 'root ul', there is only a mat-tree host element.

Unfortunately, I think there's a weird bug with Material or a flaw in Angular generally preventing it from rendering anything into 'children' <ul> (specifically, in the ViewContainerRef set by the <ng-container matTreeNodeOutlet>) when ANY directive is attached to it. If so, that's Angular being its usual dumb, complicated, fragile self. I started reading Material's source code and I'm now getting nightmares. Why does a tree component need to re-implement NgFor? Who knows.

Note: I have reproduced the issue without using Dragula, so the bug isn't here. See here https://stackblitz.com/edit/angular-7fkpzq-1i5xg3 Feel free to file that as an issue on Material linking to this comment and that blitz, but I'm going to stop here.

That bug might be at these lines in angular/material2. Maybe you can't create an embedded view when there's already a directive on the container element. That doesn't seem right, but you try removing and adding the dragula directive in line 21 of the below blitz and watch (by clicking or in the inspector) as:

the ul gets content inside it when there is no dragula directive. These are many <mat(-nested)-tree-node> instances.
it is empty when you put the directive on it again.

https://stackblitz.com/edit/angular-7fkpzq-jni4ac?file=app/tree-nested-overview-example.html

Workarounds?

Well, you can always drop Material. Nested tree components are actually so extremely easy it's a puzzle why Mat-Tree was created in the first place (except now it has flatteners, so that's ok).

Roughly like this blitz. I didn't implement the dragulaModel stuff, but then again, you're not exactly paying me, so good luck.

Aug 02 '18 04:08 cormacrelf

@cormacrelf thank you very much! I want to apologize for your nightmares :) I am also became nervous because of that tree!! And thank you a lot for your tree implementation. Now here is really a few ways, I suppose:

Write your own tree
Create own comparison mechanism for flat container without dragulaModel like you mentioned in my previous mat tree issue
Create bug issue on material repo and try to explain that this behavior is wrong. I am still in process of comparison this approaches :)

Aug 02 '18 07:08 furevor

Do 1 and 3. It’s a weird bug, probably not easy.

On 2 Aug 2018, at 17:14, furevor [email protected] wrote:

@cormacrelf thank you very much! I want to apologize for your nightmares :) I am also became nervous because of that tree!! And thank you a lot for your tree implementation. Now here is really a few ways, I suppose:

Write your own tree Create own comparison mechanism for flat container like you mentioned in my previous mat tree issue Create bug issue on material repo and try to explain that this behavior is wrong. I am still in process of comparison this approaches :) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

Aug 02 '18 07:08 cormacrelf