I'm trying to track changes made to the tree nodes data source. Each node has a selected property which reflects the node selection status, every time I select a node, I need to emit the selection to another component, which will build another tree according to that selection.
I tried with OnChanges interface, but I read later in the doc that ngOnChanges is called only when data is set again.
This is my simple template:
<clr-tree-node [(clrSelected)]="selected" >
Asset
<ng-template [clrIfExpanded]="true">
<clr-tree-node *ngFor="let asset of assets" [(clrSelected)]="asset.selected">
{{asset.type}}
</clr-tree-node>
</ng-template>
</clr-tree-node>
Is there a tree node event I can bind I can use to emit (with EventEmitter) the changed data? For example onSelectionChange, or onChange or something else? Or any other mechanism?
Thanks in advance, Alex.
As far as I can see, you are already binding to that event. Just use the long form of the two way binding:
template.html
<clr-tree-node [clrSelected]="selected" (clrSelectedChange)="changeSelected($event)">
Asset
<ng-template [clrIfExpanded]="true">
<clr-tree-node
*ngFor="let asset of assets
[clrSelected]="asset.selected"
(clrSelectedChange)="changeSelectedAsset(asset, $event)"
>{{asset.type}}</clr-tree-node>
</ng-template>
</clr-tree-node>
component.ts
@Component(...)
export class MyComp {
@Output public structureChange:EventEmitter<...> = new EventEmitter<...>();
public changeSelected(data):void {
this.selected = data;
this.structureChange.emit(data);
}
public changeSelectedAsset(asset, data):void {
asset.selected = data;
this.structureChange.emit(this.selected);
}
}
Something like this. Of course, add datatypes wherever possible.