🐛 fix(angular): use EventEmitter again (#1077)

* fix(angular): use EventEmitter again * chore: format files
baloise · Oct 19, 2023 · b468abd · b468abd
1 parent 0ebe5fd
commit b468abd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 5 deletions.
diff --git a/.changeset/witty-months-whisper.md b/.changeset/witty-months-whisper.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components-angular': patch
+---
+
+Utilize an Angular EventEmitter for output instead of RX.JS fromEvent, as it tends to trigger events twice
diff --git a/packages/components/src/components/bal-data/bal-data-value/bal-data-value.tsx b/packages/components/src/components/bal-data/bal-data-value/bal-data-value.tsx
@@ -38,12 +38,13 @@ export class DataValue {
    */
   @Event() balBlur!: EventEmitter<BalEvents.BalDataValueBlurDetail>
 
-  onClickHandler(ev: MouseEvent) {
-    this.balClick.emit(ev)
+  private onClickHandler = (ev: MouseEvent) => {
     const input = this.el.querySelector('bal-input')
     if (!isNil(input)) {
       input.setFocus()
     }
+
+    this.balClick.emit(ev)
   }
 
   render() {

diff --git a/packages/output-targets/angular/angular-component-lib/utils.ts b/packages/output-targets/angular/angular-component-lib/utils.ts
@@ -1,6 +1,6 @@
 /* eslint-disable */
 /* tslint:disable */
-import { fromEvent } from 'rxjs'
+import { EventEmitter } from '@angular/core'
 
 export const proxyInputs = (Cmp: any, inputs: string[]) => {
   const Prototype = Cmp.prototype
@@ -28,8 +28,8 @@ export const proxyMethods = (Cmp: any, methods: string[]) => {
   })
 }
 
-export const proxyOutputs = (instance: any, el: any, events: string[]) => {
-  events.forEach(eventName => (instance[eventName] = fromEvent(el, eventName)))
+export const proxyOutputs = (instance: any, _el: any, events: string[]) => {
+  events.forEach(eventName => (instance[eventName] = new EventEmitter()))
 }
 
 export const defineCustomElement = (tagName: string, customElement: any) => {