feat(rx): add directive which uses resize-observer

Author: michaelbe812

libs/rx/platform/src/lib/directives/observe-resize.directive.spec.ts

@@ -0,0 +1,46 @@
+import {ObserveResizeDirective, ObserveResizeDirectiveModule} from './observe-resize.directive';
+import {Component} from '@angular/core';
+import {ComponentFixture, TestBed} from '@angular/core/testing';
+import {mockResizeObserver} from '@angular-kit/testing';
+
+describe('ObserveResizeDirective', () => {
+  it('should create an instance', async () => {
+    const { testComponent } = await create();
+    expect(testComponent).toBeTruthy();
+  });
+});
+
+async function create() {
+  @Component({
+    template: `
+      <section style="position: relative; height: 200px; overflow: auto;">
+        <h1
+          id="resize_elem"
+          style="position: absolute; top: 200px; height: 200px;"
+          observeResize
+          (resizeEvent)="onResize()"
+        >
+          I'm being observed
+        </h1>
+      </section>
+    `,
+  })
+  class TestComponent {
+    onResize = jest.fn();
+    observe = true;
+  }
+
+  let fixture: ComponentFixture<TestComponent>;
+  let testComponent: TestComponent;
+
+  TestBed.configureTestingModule({
+    imports: [ObserveResizeDirectiveModule],
+    declarations: [TestComponent],
+  });
+  mockResizeObserver();
+  fixture = TestBed.createComponent(TestComponent);
+  testComponent = fixture.componentInstance;
+  fixture.detectChanges();
+
+  return { fixture, testComponent };
+}

libs/rx/platform/src/lib/directives/observe-resize.directive.ts

@@ -0,0 +1,41 @@
+import {Directive, ElementRef, Input, NgModule, OnDestroy, Output} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {Subscription} from 'rxjs';
+import {createResizeObserver, ResizeObserverConfig} from '../create-resize-observer';
+import {createSignal} from '@code-workers.io/angular-kit/rx/signal';
+import {Nullable} from '@code-workers.io/angular-kit/cdk/types';
+
+@Directive({
+  selector: '[observeResize]',
+})
+export class ObserveResizeDirective implements OnDestroy {
+  private subscription = new Subscription();
+  private configSignal = createSignal<ResizeObserverConfig | null>();
+
+  @Input() set resizeObserverConfig(config: ResizeObserverConfig | null) {
+    this.configSignal.send(config);
+  }
+
+  private resizeObserver$ = createResizeObserver(this.element);
+
+  @Output() resizeEvent = this.resizeObserver$;
+
+  constructor(private element: ElementRef) {
+    this.subscription.add(
+      this.configSignal.$.subscribe((config: Nullable<ResizeObserverConfig>) => {
+        this.resizeObserver$ = createResizeObserver(this.element, config ?? undefined);
+      })
+    );
+  }
+
+  ngOnDestroy() {
+    this.subscription.unsubscribe();
+  }
+}
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [ObserveResizeDirective],
+  exports: [ObserveResizeDirective],
+})
+export class ObserveResizeDirectiveModule {}