Description
Please see this - https://stackoverflow.com/q/65412659/2896495.
I needed a dynamically loading nodes in the angular material tree, so I created my own GeoDataSource which internally uses @ngrx/component-store to handle all the interaction between data source, TreeControl and the tree itself.
Now, the problem is the tree doesn't keep its expansion state because the abstract class BaseTreeControl<T, K = T> uses SelectionModel<T> class and this in turn uses Set<T> to keep track of items that are selected. So if node is expanded it just does this:
this._selection.add(value); // Set<T>.add(value)
When using immutable data (from the component store) those items are always new.
I tried to use trackBy optional function:
this.treeControl = new FlatTreeControl<SomeEntityFlatNode, string>(
(node) => node.nodeLevel,
(node) => node.expandable, {
trackBy: (node) => node.groupPath // *** groupPath is string (it's an ID) ***
}
);
and for this I had to change FlatTreeControl<SomeEntityFlatNode> to FlatTreeControl<SomeEntityFlatNode, string>, otherwise it doesn't compile. But then I got the following error in the template:
Type 'FlatTreeControl<SomeEntityFlatNode, string>' is not assignable to type 'TreeControl<SomeEntityFlatNode, SomeEntityFlatNode>'
Here's the template:
<mat-tree *ngIf="hasData$ | async" [dataSource]="geoDataSource" [treeControl]="treeControl">
</mat-tree>
Now what? How do I make all this work with immutable data from the store?