Html Question posted in
Some basic documentation can be found here.

Html – Angular Resize event Library in angular 18

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 ?

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    Someone forked the original package "angular-resize-event", to support Angular 16, 17 and 18:
    https://www.npmjs.com/package/angular-resize-event-package

    The usage is the same as previous package:

    (copy from link above):

    $ npm install angular-resize-event-package

    Only change this:

    import { AngularResizeEventModule } from 'angular-resize-event';

    with

    import { AngularResizeEventModule } from 'angular-resize-event-package';
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search