Exposed dropdown directive from dropdown treeview component

TapBeep · Sep 21, 2024 · 6498f0a · 6498f0a
1 parent 7fd36e3
commit 6498f0a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/projects/ngx-treeview2/src/lib/components/dropdown-treeview/dropdown-treeview.component.ts b/projects/ngx-treeview2/src/lib/components/dropdown-treeview/dropdown-treeview.component.ts
@@ -5,6 +5,7 @@ import {TreeviewConfig} from '../../models/treeview-config';
 import {TreeviewComponent} from '../treeview/treeview.component';
 import {TreeviewHeaderTemplateContext} from '../../models/treeview-header-template-context';
 import {TreeviewItemTemplateContext} from '../../models/treeview-item-template-context';
+import {DropdownDirective} from '../../directives/dropdown.directive';
 
 @Component({
   selector: 'ngx-dropdown-treeview',
@@ -20,6 +21,7 @@ export class DropdownTreeviewComponent {
   @Output() selectedChange = new EventEmitter<any[]>(true);
   @Output() filterChange = new EventEmitter<string>();
   @ViewChild(TreeviewComponent, { static: false }) treeviewComponent: TreeviewComponent;
+  @ViewChild(DropdownDirective, { static: false }) dropdownDirective: DropdownDirective;
   buttonLabel: string;
 
   constructor(

diff --git a/src/app/book/book.component.html b/src/app/book/book.component.html
@@ -67,14 +67,19 @@ <h3>Components (
               <input class="form-check-input" type="checkbox" [(ngModel)]="dropdownEnabled"> Enable/disable
             </label>
           </div>
+          <div>
+            <label class="form-check-label">
+              <input class="form-check-input" type="checkbox" [(ngModel)]="closeOnSelection"> Close dropdown on selection
+            </label>
+          </div>
           <div class="form-group form-inline">
             <label>buttonClass</label>
             <select class="form-control mx-sm-3" [(ngModel)]="buttonClass">
               <option *ngFor="let c of buttonClasses" [value]="c">{{c}}</option>
             </select>
           </div>
-          <ngx-dropdown-treeview [config]="config" [items]="items" [buttonClass]="buttonClass"
-            (selectedChange)="values = $event" [disabled]="!dropdownEnabled"
+          <ngx-dropdown-treeview #dropdownTreeview [config]="config" [items]="items" [buttonClass]="buttonClass"
+            (selectedChange)="onSelectedChange($event)" [disabled]="!dropdownEnabled"
             [ngxDisabledOnSelector]="'button.dropdown-toggle'" (filterChange)="onFilterChange($event)">
           </ngx-dropdown-treeview>
         </div>

diff --git a/src/app/book/book.component.ts b/src/app/book/book.component.ts
@@ -1,5 +1,5 @@
-import {Component, OnInit} from '@angular/core';
-import {TreeviewConfig, TreeviewItem} from 'ngx-treeview2';
+import {Component, OnInit, ViewChild} from '@angular/core';
+import {DropdownTreeviewComponent, TreeviewConfig, TreeviewItem} from 'ngx-treeview2';
 import {BookService} from './book.service';
 
 @Component({
@@ -33,6 +33,9 @@ export class BookComponent implements OnInit {
   ];
   buttonClass = this.buttonClasses[0];
 
+  @ViewChild('dropdownTreeview') dropdownTreeview: DropdownTreeviewComponent;
+  closeOnSelection = false;
+
   constructor(
     private service: BookService
   ) { }
@@ -44,4 +47,11 @@ export class BookComponent implements OnInit {
   onFilterChange(value: string): void {
     console.log('filter:', value);
   }
+
+  onSelectedChange(event: any[]) {
+    this.values = event;
+    if (this.closeOnSelection) {
+      this.dropdownTreeview.dropdownDirective.close();
+    }
+  }
 }