feat(angular/dropdown): add trigger directive (#223)

siemens · Dec 7, 2022 · e698bc9 · e698bc9
1 parent 90363be
commit e698bc9
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 8 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/dropdown.ts b/packages/angular-test-app/src/preview-examples/dropdown.ts
@@ -12,8 +12,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-dropdown',
   template: `
-    <ix-button id="triggerId">Open</ix-button>
-    <ix-dropdown trigger="triggerId">
+    <ix-button #trigger>Open</ix-button>
+    <ix-dropdown [ixDropdownTrigger]="trigger">
       <ix-dropdown-item label="Item 1"></ix-dropdown-item>
       <ix-dropdown-item label="Item 2"></ix-dropdown-item>
       <ix-dropdown-item label="Item 3"></ix-dropdown-item>

diff --git a/packages/angular/src/dropdown/trigger.directive.ts b/packages/angular/src/dropdown/trigger.directive.ts
@@ -0,0 +1,22 @@
+/*
+ * SPDX-FileCopyrightText: 2022 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { Directive, ElementRef, Input } from '@angular/core';
+
+@Directive({
+  selector: '[ixDropdownTrigger]',
+})
+export class IxDropdownTriggerDirective {
+  @Input() ixDropdownTrigger!: any;
+
+  constructor(private element: ElementRef) {}
+
+  protected ngOnChanges() {
+    this.element.nativeElement.trigger = this.ixDropdownTrigger.el;
+  }
+}
diff --git a/packages/angular/src/index.ts b/packages/angular/src/index.ts
@@ -9,8 +9,8 @@
 
 export * from '@siemens/ix';
 export * from './components';
+export * from './dropdown/trigger.directive';
 export * from './modal';
 export * from './module';
 export * from './toast';
 export * from './tree';
-
diff --git a/packages/angular/src/module.ts b/packages/angular/src/module.ts
@@ -9,17 +9,19 @@
 
 import { DOCUMENT } from '@angular/common';
 import {
-    APP_INITIALIZER,
-    ModuleWithProviders,
-    NgModule,
-    NgZone
+  APP_INITIALIZER,
+  ModuleWithProviders,
+  NgModule,
+  NgZone,
 } from '@angular/core';
 import { appInitialize } from './app-initialize';
 import { DIRECTIVES } from './declare-components';
+import { IxDropdownTriggerDirective } from './dropdown/trigger.directive';
 import { ModalService } from './modal';
 import { ToastService } from './toast';
 import * as tree from './tree';
-const DECLARATIONS = [...DIRECTIVES, tree.IxTree];
+
+const DECLARATIONS = [...DIRECTIVES, tree.IxTree, IxDropdownTriggerDirective];
 
 @NgModule({
   declarations: DECLARATIONS,