Resize Event For Textarea

HTML textarea resize event

A simple solution can be just adding a check for width/height, not a perfect solution though:

var ta = document.getElementById("text-area");var width = ta.clientWidth, height = ta.clientHeightdocument.getElementById("text-area").addEventListener("mouseup", function(){  if(ta.clientWidth != width || ta.clientHeight != height){    //do Something    console.log('resized');  }  width = ta.clientWidth;  height = ta.clientHeight;});

<textarea id="text-area" rows="4" cols="50"></textarea>

html textArea resize event with Angular

resizable.textarea.directive.ts

@Directive({
  selector: 'textarea[resize]'
})
export class ResizableTextAreaDirective {
  @Output() resize = new EventEmitter();

  width: number;
  height: number;

  mouseMoveListener: Function;

  @HostListener('mousedown', ['$event.target'])
  onMouseDown(el) {
    this.width = el.offsetWidth;
    this.height = el.offsetHeight;
    this.mouseMoveListener = this.renderer.listen('document', 'mousemove', () => {
      if (this.width !== el.offsetWidth || this.height !== el.offsetHeight) {
        this.resize.emit({ width: el.offsetWidth, height: el.offsetHeight });
      }
    });
  }

  @HostListener('document:mouseup')
  onMouseUp(el) {
    this.ngOnDestroy();
  }

  constructor(private renderer: Renderer2) {}

  ngOnDestroy() {
    if (this.mouseMoveListener) {
      this.mouseMoveListener();
    }
  }
}

Use it as follows:

<textarea (resize)="resizeEvent($event)"></textarea>

Stackblitz Example

resize() on a textarea doesn't detect manual resizing only programmatical

Did you try modifying your script to:

$("textarea").resizable({
    resize:function(){
       $( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );
    }
})

I'll need to see the rest of your Javascript to find out why it's not firing. But you don't necessary need to use the resize function. Try binding it with the mouseup event:

$('textarea').bind('mouseup',function(){
    if(this.style.width != this.outerWidth || this.style.height != this.outerHeight){
        $(this).resize();
        this.outerWidth  = this.style.width;
        this.outerHeight = this.style.height;
    }
});

See: jsfiddle

Angular-resize-event not working for textarea

The reason why it is not detecting a change in width on your parent <div>, is because, the parent <div>'s width seems to be set as 100% by default. You will need to use the css property display, and set the value as inline-block.

<div (resized)="onResize($event)" style="display:inline-block">
  <textarea #resizable></textarea>      
</div>

With that, the resized event should be able to capture changes in both width and height!

I have forked and re-created the demo for you over here. Hope it solves your problem.

jQuery - Detect when textarea is resized

DEMO

$(document).ready(function () {
    var $textareas = jQuery('textarea');

    // set init (default) state   
    $textareas.data('x', $textareas.outerWidth());
    $textareas.data('y', $textareas.outerHeight());

    $textareas.mouseup(function () {

        var $this = $(this);

        if ($this.outerWidth() != $this.data('x') || $this.outerHeight() != $this.data('y')) {
            alert($this.outerWidth() + ' - ' + $this.data('x') + '\n' + $this.outerHeight() + ' - ' + $this.data('y'));
        }

        // set new height/width
        $this.data('x', $this.outerWidth());
        $this.data('y', $this.outerHeight());
    });
});