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>
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.