resize-observer.service.ts

import { Injectable } from '@angular/core';
import { isNil } from 'lodash-es';
import { ReplaySubject } from 'rxjs';
import { filter, finalize, map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root',
})
export class ResizeObserverService {
  private readonly entries: ReplaySubject<Array<ResizeObserverEntry>> = new ReplaySubject(1);
  private readonly observer: ResizeObserver = new ResizeObserver((entries) => this.entries.next(entries));

  public observe(element: HTMLElement, options?: ResizeObserverObserveOptions) {
    this.observer.observe(element, options);
    return this.entries.pipe(
      map((entries) => entries.find((entry) => entry.target === element)),
      filter((entry) => !isNil(entry)),
      finalize(() => this.observer.unobserve(element)),
    );
  }

  public unobserve(element: HTMLElement) {
    return this.observer.unobserve(element);
  }
}