feat(cdk/layout): add ResizeObserver

Author: Char2sGu

packages/cdk/layout/src/public-api.ts

@@ -1,3 +1,4 @@
 export * from './color-scheme';
 export * from './color-scheme-observer';
 export * from './named-breakpoint-observer';
+export * from './resize-observer';

packages/cdk/layout/src/resize-observer.ts

@@ -0,0 +1,20 @@
+import { Injectable } from '@angular/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Service that provides a stream of ResizeObserverEntry arrays for the given element.
+ * Uses the native ResizeObserver API.
+ */
+@Injectable({ providedIn: 'root' })
+export class ResizeObserver {
+  /**
+   * Observes the given element and returns a stream of ResizeObserverEntry arrays.
+   */
+  observe(element: HTMLElement): Observable<ResizeObserverEntry[]> {
+    return new Observable((observer) => {
+      const instance = new window.ResizeObserver((e) => observer.next(e));
+      instance.observe(element);
+      return () => instance.disconnect();
+    });
+  }
+}