mwlresizable doesn't work

Question

I am trying to resize a picture, but on mouse up, the picture just moves to the new position without resizing.

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}">

component.ts:

import { ResizeEvent } from "angular-resizable-element";

export class Component{

  onResizeEnd(event: ResizeEvent): void {
    console.log('Element was resized', event);
  }
}

app.module:

...
import {ResizableModule} from "angular-resizable-element";


@NgModule({
  declarations: [
    AppComponent,
    MainComponent
  ],
  imports: [
    BrowserModule,

    HttpClientModule,
    AngularDraggableModule,
    ResizableModule
  ],
  providers: [GetJsonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

I did everything by the book

Answer 1

In case its still useful for anyone. You need to apply width and height in onResizeEnd function:

Change component code to this:

import { ResizeEvent } from "angular-resizable-element";

export class Component{
   style: {};
   onResizeEnd(event: ResizeEvent): void {
      this.style = {
        width: `${event.rectangle.width}px`,
        height: `${event.rectangle.height}px`
      };
  }
}

Change HTML code to this:

<img id=image1
       ngDraggable
       mwlResizable
       [enableGhostResize]="true"
       [resizeEdges]="{bottom: true, right: true, top: true, left: true}"
       (resizeEnd)="onResizeEnd($event)"
       src="{{user.picture}}" [ngStyle]="style">