listen to tree item selection change in parent

Author: saleem-abuhamam

projects/terminology-treeview/src/lib/terminology-tree-filter/terminology-tree-filter.component.ts

@@ -102,7 +102,7 @@ export class TerminologyTreeFilterComponent
    * tree related outputs
    */
   @Output() edutrCheckedChange = new EventEmitter<boolean>();
-  @Output() edutrSelectedChange = new EventEmitter<any[]>();
+  @Output() edutrSelectedChange = new EventEmitter<TerminologyTreeviewItem[]>();
   @Output() edutrFilterChange = new EventEmitter<string>();
   /**
    * internal input field related
@@ -119,9 +119,6 @@ export class TerminologyTreeFilterComponent
   @Input() edutrFilterText = '';
   @Input() edutrShowClearButton: boolean = true;
 
-  @Output() emitEdutrFilterText: EventEmitter<string> =
-    new EventEmitter<string>();
-
   edutrMaxHeight = '212px';
   edutrDebounceInputTime = 350;
 
@@ -328,11 +325,16 @@ export class TerminologyTreeFilterComponent
     setTimeout(() => {
       this.overlayRef?.updatePosition();
     });
-    // this.emitSelection();
+    this.emitSelection();
+  }
+
+  emitSelection() {
+    this.edutrSelectedChange.emit(this.selected);
   }
 
   onEdutrItemClicked(item: TerminologyTreeviewItem | any) {
     this.selected.push(item);
+    this.emitSelection();
   }
 
   isOptionsPanelOpen() {
@@ -388,6 +390,7 @@ export class TerminologyTreeFilterComponent
     openOptionsPanel: boolean = true
   ) {
     this.selected = this.selected.filter(value => value !== option);
+    this.emitSelection();
     setTimeout(() => this.overlayRef?.updatePosition());
   }
 

projects/terminology-treeview/src/lib/terminology-treeview.component.html

@@ -1,4 +1,5 @@
 <edutr-terminology-tree-filter
   [edutrItems]="edutrItems"
-  [edutrConfig]="edutrConfig">
+  [edutrConfig]="edutrConfig"
+  (edutrSelectedChange)="onEdutrSelectedChange($event)">
 </edutr-terminology-tree-filter>

projects/terminology-treeview/src/lib/terminology-treeview.component.ts

@@ -27,7 +27,7 @@ export class TerminologyTreeviewComponent {
   @Input() edutrItems: TerminologyTreeviewItem;
 
   @Output() edutrCheckedChange = new EventEmitter<boolean>();
-  @Output() edutrSelectedChange = new EventEmitter<any[]>();
+  @Output() edutrSelectedChange = new EventEmitter<TerminologyTreeviewItem[]>();
   @Output() edutrFilterChange = new EventEmitter<string>();
 
   values: number[];
@@ -37,4 +37,8 @@ export class TerminologyTreeviewComponent {
   onFilterChange(value: string): void {
     console.log('filter:', value);
   }
+
+  onEdutrSelectedChange(items: TerminologyTreeviewItem[]) {
+    this.edutrSelectedChange.emit(items);
+  }
 }

projects/terminology-treeview/src/public-api.ts

@@ -4,3 +4,4 @@
 
 export * from './lib/terminology-treeview.component';
 export * from './lib/terminology-treeview.module';
+export * from './lib/model/terminology-treeview-item';

src/app/terminology-tree-test/terminology-tree-test.component.html

@@ -1,8 +1,17 @@
 <edutr-terminology-treeview
-  [edutrItems]="pathologyTreeItems"></edutr-terminology-treeview>
+  [edutrItems]="pathologyTreeItems"
+  (edutrSelectedChange)="
+    onPathologySelectedChange($event)
+  "></edutr-terminology-treeview>
 <br />
 <edutr-terminology-treeview
-  [edutrItems]="anatomyTreeItems"></edutr-terminology-treeview>
+  [edutrItems]="anatomyTreeItems"
+  (edutrSelectedChange)="
+    onAnatomySelectedChange($event)
+  "></edutr-terminology-treeview>
 <br />
 <edutr-terminology-treeview
-  [edutrItems]="diagnosisTreeItems"></edutr-terminology-treeview>
+  [edutrItems]="diagnosisTreeItems"
+  (edutrSelectedChange)="
+    onDiagnosisSelectedChange($event)
+  "></edutr-terminology-treeview>

src/app/terminology-tree-test/terminology-tree-test.component.ts

@@ -1,6 +1,6 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { TerminologyTreeviewItem } from '../../../projects/terminology-treeview/src/lib/model/terminology-treeview-item';
+import { TerminologyTreeviewItem } from 'terminology-treeview';
 import { Subscription } from 'rxjs';
 
 @Component({
@@ -45,6 +45,16 @@ export class TerminologyTreeTestComponent implements OnInit, OnDestroy {
       });
   }
 
+  onPathologySelectedChange(event: TerminologyTreeviewItem[]) {
+    console.log(event);
+  }
+  onAnatomySelectedChange(event: TerminologyTreeviewItem[]) {
+    console.log(event);
+  }
+  onDiagnosisSelectedChange(event: TerminologyTreeviewItem[]) {
+    console.log(event);
+  }
+
   ngOnDestroy() {
     this.subscription?.unsubscribe();
   }