From 49aeba46267fe2d35e29b4598d08081874b77232 Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@siemens.com>
Date: Tue, 6 Dec 2022 15:27:48 +0100
Subject: [PATCH] feat(angular/dropdown): add trigger directive
---
.../src/preview-examples/dropdown.ts | 4 ++--
.../angular/src/dropdown/trigger.directive.ts | 22 +++++++++++++++++++
packages/angular/src/index.ts | 2 +-
packages/angular/src/module.ts | 12 +++++-----
4 files changed, 32 insertions(+), 8 deletions(-)
create mode 100644 packages/angular/src/dropdown/trigger.directive.ts
diff --git a/packages/angular-test-app/src/preview-examples/dropdown.ts b/packages/angular-test-app/src/preview-examples/dropdown.ts
index 8369f9cd8d9..80e51cc63bd 100644
--- 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
new file mode 100644
index 00000000000..a462c166438
--- /dev/null
+++ 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
index 81195099aa2..3cf7786a3d0 100644
--- 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
index 2a151268389..57bb233d284 100644
--- 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,