title: angular 2+ vertically resize div
body: <p>I am new to angular2 and I have been trying to create a resizable div (vertically). but I am unable to achieve that. What I have tried using a directive </p>
  
  <p>and this is my directive</p>
  
  <pre><code>import { Directive, HostListener, ElementRef, Input } from '@angular/core';
  
  @Directive({
    selector: '[appNgxResizer]'
  })
  export class NgxResizerDirective {
  
    constructor(private el: ElementRef) {
    }
  
    @HostListener('mousemove', ['$event']) resize(e) {
      this.el.nativeElement.parentNode.style.height = (e.clientY - this.el.nativeElement.parentNode.offsetTop) + 'px';
      event.preventDefault();
    }
  
    @HostListener('mouseup', ['$event']) stopResize(e) {
      event.preventDefault();
    }
  }
  </code></pre>
  
  <p>Here is the stackblitz for what I have tried <a href="https://stackblitz.com/edit/angular-text-resizable-q6ddyy" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-text-resizable-q6ddyy</a></p>
  
  <p>I want to click grab to resize the div. Something like this <a href="https://jsfiddle.net/zv2ep6eo/" rel="nofollow noreferrer">https://jsfiddle.net/zv2ep6eo/</a>.</p>
  
  <p>Thanks.</p>