Second Treeview behide *ngIf

[Brad]

I am trying to make drag drop work between two treeviews.  My second treeview is under an *ngIf and does not always exist.

I have included 'dropZoneTreeViews' in both tree layouts.  '(nodeDrop)' event does not fire on the second tree when visible.

I have a work around:  If I add a '@ViewChild' to the component for the second 'TreeViewComponent' then events fire, but Angular throws an 'ExpressionChangedAfterItHasBeenCheckedError' error.

Can you advise any Help?

Brad

[Yanmario]

Hi Brad,

This is happening because the dropZoneTreeView is set to undefine as the second TreeView isn't present in the DOM. This is kinda tricking the application that there is a zone even tho there isn't one until you render the second TreeView. The most straightforward approach to avoid the error would be to trigger Angular's Change Detection when rendering the second component as demonstrated in the following example:

https://stackblitz.com/edit/angular-2dtr2h?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

Online resources on the error:

https://angular.io/errors/NG0100

https://stackoverflow.com/questions/43375532/expressionchangedafterithasbeencheckederror-explained

I hope this helps.

Regards,
Yanmario
Progress Telerik

[Brad]

Thank you for your feedback.  I will look into forcing change detection.

I am not really worried about angular's error message.  I am more worried that the treeview doesn't work without this kinda trick.

If you remove the '@viewchild' decorator, drag drop stops working.

So how do I make drag drop work without using a local viewchild variable.

Brad

[Yanmario]

Hi Brad,

Well, this functionality is meant to work with two instances of the component that are rendered on the page, and the mentioned approach by triggering Angulars Change Detection is valid in such cases and shouldn't break the logic.

Another approach would be just to hide the second TreeView using the HTML hidden property which will still render the component in the DOM and will avoid triggering the Change Detection manually. Example with the hidden property used on the DIV element:

https://stackblitz.com/edit/angular-2dtr2h-nqpaj4?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.module.ts

Regards,
Yanmario
Progress Telerik