I am attempting to resize an element by dragging, similar to this example. I have created a simple directive for this purpose:
@Directive({ selector: '[drag-resize]' })
export class DragResizeDirective {
private dragging: boolean;
constructor(el: ElementRef, renderer: Renderer2) {
renderer.listen('window', 'mouseup', (e) => {
if (this.dragging) {
el.nativeElement.style.backgroundColor = 'red'; // This works fine.
el.nativeElement.style.height = `${e.pageY + 2}px`; // But this does not work as expected.
this.dragging = false;
}
});
}
@HostListener('mousedown') onMouseDown() {
this.dragging = true;
}
}
The issue I am facing is that I am unable to change the height of the element. Other styles are being applied correctly. I am using Angular 4.0.3.
Here are the computed attributes:
display: block;
height: 244.781px;
left: 0px;
overflow-x: hidden;
overflow-y: scroll;
position: absolute;
top: 655.422px;
width: 1793px;
*renderer.setStyle() method also does not work in this scenario.
** The element I am trying to resize is a grid tile (md-grid-tile from Angular Material).
*** The directive functions properly with other elements.