Resize with aspect ration angular div

Issue

I'm trying to resize a div in angular mantaining the aspect ratio (of a rectangle). But I can't do it. I can't drag the corner of the div and resize it. Here's a stackbliz

https://stackblitz.com/edit/icon-font-awesome-f6ydhr?file=src/app/app.component.ts

I tried to use this answer: https://stackoverflow.com/a/30494623/1540456

but with no success. Here's some code

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  width= 300;
  height= 150;
  color= 'red';
  
  dragEvent(event: MouseEvent) {
    let ratio = (16 / 10);
    let diagonal = this.height * ratio;
    this.height = this.getHeight(diagonal, ratio);
    this.width = this.getWidth(this.height, ratio);
}

getHeight(length, ratio) {
    let height = ((length) / (Math.sqrt((Math.pow(ratio, 2) + 1))));
    return Math.round(height);
}

getWidth(length, ratio) {
    let width = ((length) / (Math.sqrt((1) / (Math.pow(ratio, 2) + 1))));
    return Math.round(width);
}
}

and in the html

<div class="resize" (mousedown)="dragEvent($event)">
    <p>drag</p>
</div>

Solution

In mousedown handler I added a listener on mousemove event and on each move based on the direction the height and the width will be adjusted according to event.pageX.

I tried to keep it simple and useful as possible. I did not see the need to recalculate the height and the width if we are always adding/subtracting the same number to both.

The mouseup listener is just to remove the mousemove listener.

I just created a StackBlitz Fork of your project with my solution.

https://stackblitz.com/edit/icon-font-awesome-m1scu4

Answered By - Mehyar Sawas