Angular Resize event Library in angular 18

Question

I have an external library angular-resize-event

My project was in angular 15 and now i am upgrading it to 18. After upgrading it to 16. While compiling it give IVY error.

I tried npm i --legacy-peer-deps too. This package was last updated 2 years ago.

Can i use the same library and upgrade to angular 18, or do i need to switch to any other alternative ?

Answer 1

You can create a directive and use it directly until a new version releases.

import {
  Directive,
  ElementRef,
  EventEmitter,
  NgZone,
  OnDestroy,
  OnInit,
  Output,
} from '@angular/core';

export class ResizedEvent {
  public newRect: DOMRectReadOnly;
  public oldRect?: DOMRectReadOnly;
  public isFirst: boolean;

  public constructor(
    newRect: DOMRectReadOnly,
    oldRect: DOMRectReadOnly | undefined
  ) {
    this.newRect = newRect;
    this.oldRect = oldRect;
    this.isFirst = oldRect == null;
  }
}

@Directive({
  selector: '[resized]',
  standalone: true,
})
export class ResizedDirective implements OnInit, OnDestroy {
  private observer: ResizeObserver;
  private oldRect?: DOMRectReadOnly;

  @Output()
  public readonly resized;

  public constructor(
    private readonly element: ElementRef,
    private readonly zone: NgZone
  ) {
    this.resized = new EventEmitter<ResizedEvent>();
    this.observer = new ResizeObserver((entries) =>
      this.zone.run(() => this.observe(entries))
    );
  }

  public ngOnInit(): void {
    this.observer.observe(this.element.nativeElement);
  }

  public ngOnDestroy(): void {
    this.observer.disconnect();
  }

  private observe(entries: ResizeObserverEntry[]): void {
    const domSize = entries[0];
    const resizedEvent = new ResizedEvent(domSize.contentRect, this.oldRect);
    this.oldRect = domSize.contentRect;
    this.resized.emit(resizedEvent);
  }
}

HTML:

<div
  (resized)="onResized($event)"
  style="
  border: 2px solid;
  padding: 20px; 
  width: 300px;
  resize: both;
  overflow: auto;background-color: red;height:50px;width:50px;resize: both"
></div>

Working Stackblitz Demo -> cd test -> npm i -> npm run start