Hi,
I'm having trouble handling the selection of tree nodes in an IgxTreeComponent with cascading selection. My use case is individually setting the [selected] input on each node according to their data matching a certain condition. Something like
@let groups = signals();@let selected = selectedSignals();<igx-tree class="signal-selector__tree" (nodeSelection)="onSelectionChanged($event)" selection="Cascading"> @for (group of groups; track group.id) { <igx-tree-node [expanded]="true"> <ng-container *ngTemplateOutlet="groupTemplate; context: { $implicit: group }" /> @for (sgn of group.signals; track sgn.uid) { <igx-tree-node [data]="sgn" [selected]="selected.includes(sgn.uid)"> <ng-container *ngTemplateOutlet="signalTemplate; context: { $implicit: sgn }" /> </igx-tree-node> } ......
This results in something like
I.e., the node itself correctly gets the selected status. The checkbox it contains does not. Directly having [selected]="true" yields the same result.
If I try to first render the nodes and then manually setting their selected status, by debugging I come across this statement:
Which always resolves to args.oldSelection, since the array itself is always defined.
I'm experiencing this with IgniteUI for Angular 18.1.2, although the code involved in this functionality seems to be the same in the 19.0.x version.
Any help with this will be much appreciated.
Hello Cesar,
Thank you for your time and understanding regarding this matter. I will be closing this case for now. However, if you have any further questions or if anything related to this issue arises, please feel free to reopen the case within the next 30 days, and we will be happy to assist you.
We appreciate your cooperation and look forward to helping you in the future if needed.Thank you for using Infragistics components. Happy New Year!
Best Regards,Arkan Ahmedov,Infragisitcs
Hi again Arkan,
thanks a lot for researching this. I'll take this advice into account and follow the linked bug.
Kind Regards
Thank you for providing the sample where the issue is reproducible.
After investigating the problem, I found that the behavior you are experiencing is related to Angular's event lifecycle, specifically when using signals in combination with the ChangeDetectionStrategy.OnPush. This behavior has been documented as an open issue on Angular's GitHub (Issue #50320).
The issue occurs because updates to signals during the current change detection cycle are not always reflected in the template immediately. This can cause templates not to update correctly until a subsequent change is detected.
There are workarounds you can apply to mitigate the issue. One approach is to use setTimeout to defer signal updates until after the current change detection cycle. This ensures that the updates trigger correctly without conflicting with Angular's lifecycle. Alternatively, you can inject ChangeDetectorRef and manually trigger change detection using the markForCheck() or detectChanges() methods after updating the signal.
.subscribe(() => { setTimeout(() => { this.selectedElements.set(["a", "b"]); // Update selectedElements signal }); this.dialog().open(); });
Please let us know if you have further questions.
Please note that due to limited staff during the Christmas holidays, response times may be longer than usual—thank you for your patience and understanding.
Best Regards, Arkan Ahmedov Infragistics
first of all please accept my excuses for having delayed my answer so long. It has been hard to find the time for further delving into this issue.
I have created a github repo that reproduces thes issue in the exact circumstances I first ran into it when working in my current project, namely: OnPush change detection, signals, tree within a dialog that gets open when the data has been retrieved. The subscription is meant to reproduce the order things are done in the original project rather than to make any sense.
https://github.com/cvarona/igx-tree-issue
You'll notice that 1) it fails exactly the same if we use plain variables instead of signals and 2) everything works ok if we use default change detection.
Kind regards
Thank you for sharing the issue you are facing. I’ve created a sample to replicate your use case, where the selection of tree nodes is conditionally controlled using the [selected] property.
[selected]
In the provided sample, I’ve implemented a cascading selection setup using the igx-tree. Nodes are dynamically marked as selected based on a specific condition within the isSelectedNode method. For instance, in this example, nodes with the Name property equal to "Report 2017" are selected by default. During testing, I was unable to reproduce the behavior you described, where the selection state of the checkbox does not align with the node's [selected] property. The checkboxes in my sample correctly reflect the selection status as expected.
igx-tree
isSelectedNode
Name
"Report 2017"
I kindly request that you review and test the attached sample in your environment. If the issue persists on your end, it would be extremely helpful if you could fork the sample, recreate the issue, and share the modified version with us. This will allow us to investigate further and provide a more targeted resolution.
Here is the sample on StackBlitz.Best Regards,Arkan Ahmedov,Infragistics