Skip to content

Latest commit

 

History

History
39 lines (30 loc) · 1.09 KB

README.md

File metadata and controls

39 lines (30 loc) · 1.09 KB

fromElementResize

Utility function written to work in Angular with RxJS. It can work on anything else as well with a change to the imports.

If you need to trigger code based on an element resize then this code will do the job. Will always emit initially, suggest skip(1) if this is not required. Uses ResizeObserver - https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

Example usage:

fromElementResize(this.elementRef.nativeElement)
  .pipe(
    skip(1),
    debounceTime(50),
    tap((entries: ResizeObserverEntry[]) => {
      /* do something */
    }),
    takeUntil(this.onDestroy$)
  )
  .subscribe();

fromDomMutation

Monitor Dom updates on given element. Uses MutationObserver - https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

Suggested use case in Angular would be within a Directive.

Example usage:

fromDomMutation(this.elementRef.nativeElement, { attributes: false, childList: true, subtree: true })
  .pipe(
    tap((mutations: MutationRecord[]) => {
      /* do something */
    }),
    takeUntil(this.onDestroy$)
  )
  .subscribe();