angular 2+ vertically resize div

I think you miss the part where you keep the old value of the height, plus check the state on mouseup and also to listen to mousedown. I didn't make it to a directive in the example bellow, but it would be complicated.

Stackblitz example

Typescript:

  height = 150;  y = 100;  oldY = 0;  grabber = false;  @HostListener('document:mousemove', ['$event'])  onMouseMove(event: MouseEvent) {    if (!this.grabber) {        return;    }    this.resizer(event.clientY - this.oldY);    this.oldY = event.clientY;  }  @HostListener('document:mouseup', ['$event'])  onMouseUp(event: MouseEvent) {    this.grabber = false;  }  resizer(offsetY: number) {    this.height += offsetY;  }  @HostListener('document:mousedown', ['$event'])  onMouseDown(event: MouseEvent) {    this.grabber = true;    this.oldY = event.clientY;    event.preventDefault();  }

HTML

<div class="textarea" [style.height.px]='height' contenteditable="true" >  this is a text area  <div class="grabber"></div>  </div>

Using @Vega's Answer - a directive.

import { Directive, HostListener, ElementRef, OnInit } from '@angular/core';@Directive({  selector: '[resizer]'})export class NgxResizerDirective implements OnInit {  height: number;  oldY = 0;  grabber = false;  constructor(private el: ElementRef) { }  @HostListener('document:mousemove', ['$event'])  onMouseMove(event: MouseEvent) {    if (!this.grabber) {      return;    }    this.resizer(event.clientY - this.oldY);    this.oldY = event.clientY;  }  @HostListener('document:mouseup', ['$event'])  onMouseUp(event: MouseEvent) {    this.grabber = false;  }  resizer(offsetY: number) {    this.height += offsetY;    this.el.nativeElement.parentNode.style.height = this.height + "px";  }  @HostListener('mousedown', ['$event']) onResize(event: MouseEvent, resizer?: Function) {    this.grabber = true;    this.oldY = event.clientY;    event.preventDefault();  }  ngOnInit() {    this.height = parseInt(this.el.nativeElement.parentNode.offsetHeight);  }}

HTML

<div class="textarea" contenteditable="true">  this is a text area  <div class="grabber" resizer contenteditable="false" ></div></div>

Try this:

Add a variable:

private canResize = false;

On mousedown enable resize by setting canResize to true:

@HostListener('mousedown', ['$event']) enableResize(e) {    this.canResize = true;    event.preventDefault();}

so that you resize only when mouse is down:

@HostListener('window:mousemove', ['$event']) resize(e) {  if (this.canResize) {    this.el.nativeElement.parentNode.style.height = (e.clientY - this.el.nativeElement.parentNode.offsetTop) + 'px';  }  event.preventDefault();}

On mouse up set canResize to false to disable resizing:

@HostListener('window:mouseup', ['$event']) stopResize(e) {    this.canResize = false;    event.preventDefault();}

Also, take a look at this

(UPDATE: created stackblitz)