feat(cdk): add useFromEvent$

Author: michaelbe812

libs/cdk/rx-interop/src/index.ts

@@ -4,3 +4,4 @@ export * from './lib/on-changes/on-changes-state';
 export * from './lib/use-functions/use-on-changes$';
 export * from './lib/use-functions/use-on-changes-state$';
 export * from './lib/use-functions/use-host-listener$';
+export * from './lib/use-functions/use-from-event$';

libs/cdk/rx-interop/src/lib/use-functions/use-from-event$.spec.ts

@@ -0,0 +1,51 @@
+import {subscribeSpyTo} from "@hirez_io/observer-spy";
+import {TestBed} from "@angular/core/testing";
+import {Component, ElementRef, inject} from "@angular/core";
+import {useFromEvent$} from "./use-from-event$";
+
+describe('useFromEvent$', () => {
+  it('should create', async () => {
+    const {useFromEvent$} = await setup();
+    expect(useFromEvent$).toBeTruthy();
+  });
+
+  it('should emit when host is clicked', async () => {
+    const {useFromEvent$, fixture} = await setup();
+    const result = subscribeSpyTo(useFromEvent$);
+    const event = new MouseEvent('click');
+
+    fixture.debugElement.triggerEventHandler('click', event);
+    (fixture.nativeElement as HTMLElement).click();
+
+    expect(result.getLastValue()).toEqual(event);
+  });
+});
+
+
+
+async function setup() {
+
+  await TestBed.configureTestingModule({
+    imports: [TestComponent],
+  }).compileComponents();
+
+  const fixture = TestBed.createComponent(TestComponent);
+  const component = fixture.componentInstance;
+  fixture.detectChanges();
+
+  const useFromEvent$ = component.hostClick$;
+
+  return {component, useFromEvent$, fixture};
+}
+
+@Component({
+  // eslint-disable-next-line @angular-eslint/component-selector
+  selector: 'test',
+  template: '',
+  standalone: true,
+  imports: []
+})
+class TestComponent {
+  element = inject(ElementRef)
+  hostClick$ = useFromEvent$(this.element,'click');
+}

libs/cdk/rx-interop/src/lib/use-functions/use-from-event$.ts

@@ -0,0 +1,44 @@
+import {ElementRef, inject, NgZone} from "@angular/core";
+import {distinctUntilChanged, fromEvent, Observable, ReplaySubject, takeUntil} from "rxjs";
+import {useOnDestroy} from "./use-host-listener$";
+
+
+/**
+ *
+ * @publicApi
+ *
+ * @description
+ * Use this function to create a stream of events from an element.
+ * By default the host listener runs outside of Angular's zone.
+ *
+ * @example
+ * const element = inject(ElementRef)
+ * const click$ = useFromEvent(this.element, 'click');
+ *
+ * click$.subscribe(() => { // do something });
+ *
+ * @param eventName
+ */
+export function useFromEvent$<T extends Event>(element: HTMLElement,eventName: string): Observable<T>
+export function useFromEvent$<T extends Event>(elementRef: ElementRef,eventName: string): Observable<T>
+export function useFromEvent$<T extends Event>(elementOrRef: HTMLElement | ElementRef,eventName: string): Observable<T>{
+  const ngZone = inject(NgZone);
+  const events$ = new ReplaySubject<T>(1);
+
+  const el = elementOrRef instanceof ElementRef ? elementOrRef?.nativeElement : elementOrRef;
+
+  ngZone.runOutsideAngular(() => {
+    fromEvent<T>(el, eventName)
+      .pipe(
+        takeUntil(useOnDestroy())
+      )
+      .subscribe(value =>
+        events$.next(value)
+      );
+  })
+
+  return events$.asObservable().pipe(
+    distinctUntilChanged()
+  );
+}
+

libs/cdk/rx-interop/src/lib/use-functions/use-host-binding$.spec.ts

@@ -0,0 +1,53 @@
+import {ElementRef, inject, Renderer2} from "@angular/core";
+
+/**
+ * @publicApi
+ *
+ * @description
+ * Use this function to create a host binding that can be used in a component.
+ *
+ * @example
+ *
+ * const disabled = useHostBinding$('disabled', false);
+ * // somewhere in the component
+ * disabled.set(true);
+ *
+ * @param className
+ * @param enabledByDefault
+ */
+export function useHostBinding$(className: string, enabledByDefault: boolean) {
+  const renderer2 = inject(Renderer2);
+  const {nativeElement} = inject(ElementRef)
+
+  let value = enabledByDefault;
+
+
+  if (value) {
+    renderer2.addClass(nativeElement, className);
+  }
+
+  return {
+    /**
+     * Set the value of the host binding
+     * @param newValue
+     */
+    set(newValue: boolean) {
+      value = newValue;
+
+      if (value) {
+        renderer2.addClass(nativeElement, className);
+      } else {
+        renderer2.removeClass(nativeElement, className);
+      }
+
+    },
+
+    /**
+     * Get the value of the host binding
+     */
+    get() {
+      return value;
+    }
+
+  }
+}

libs/cdk/rx-interop/src/lib/use-functions/use-host-binding$.ts

@@ -38,7 +38,12 @@ export function useHostListener$<T extends Event>(eventName: string): Observable
   );
 }
 
-function useOnDestroy() {
+/**
+ * @internal
+ * @description
+ * helper
+ */
+export function useOnDestroy() {
   const onDestroy$ = new ReplaySubject<void>(1);
   const viewRef = inject(ChangeDetectorRef) as ViewRef;