feat(cdk): make it configurable to run change detection of not in useFromEvent$

Author: michaelbe812

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

@@ -1,7 +1,10 @@
-import {ElementRef, inject, NgZone} from "@angular/core";
-import {distinctUntilChanged, fromEvent, Observable, ReplaySubject, takeUntil} from "rxjs";
-import {useOnDestroy} from "./use-host-listener$";
+import {ChangeDetectorRef, ElementRef, inject, NgZone} from '@angular/core';
+import {distinctUntilChanged, fromEvent, Observable, ReplaySubject, takeUntil} from 'rxjs';
+import {useOnDestroy} from './use-host-listener$';
 
+export interface UseFromEventConfig {
+  zoneless?: boolean;
+}
 
 /**
  *
@@ -19,26 +22,37 @@ import {useOnDestroy} from "./use-host-listener$";
  *
  * @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>{
+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>(
+  element: HTMLElement,
+  eventName: string,
+  cfg: UseFromEventConfig
+): Observable<T>;
+export function useFromEvent$<T extends Event>(
+  elementRef: ElementRef,
+  eventName: string,
+  cfg: UseFromEventConfig
+): Observable<T>;
+export function useFromEvent$<T extends Event>(
+  elementOrRef: HTMLElement | ElementRef,
+  eventName: string,
+  cfg?: UseFromEventConfig
+): Observable<T> {
   const ngZone = inject(NgZone);
   const events$ = new ReplaySubject<T>(1);
+  const cdr = cfg?.zoneless ? undefined : inject(ChangeDetectorRef);
 
   const el = elementOrRef instanceof ElementRef ? elementOrRef?.nativeElement : elementOrRef;
 
   ngZone.runOutsideAngular(() => {
     fromEvent<T>(el, eventName)
-      .pipe(
-        takeUntil(useOnDestroy())
-      )
-      .subscribe(value =>
-        events$.next(value)
-      );
-  })
+      .pipe(takeUntil(useOnDestroy()))
+      .subscribe((value) => {
+        events$.next(value);
+        cfg?.zoneless ? void 0 : cdr.detectChanges();
+      });
+  });
 
-  return events$.asObservable().pipe(
-    distinctUntilChanged()
-  );
+  return events$.asObservable().pipe(distinctUntilChanged());
 }
-