I have a row-like layout, and on the rows, there are several text areas in embedded divs, just like the following:
<div class="row-192">
<div class="inner">
<p>
text
</p>
<textarea rows="4" cols="40"></textarea>
</div>
</div>
If the user resizes the textArea with the small triangle button, I need to adjust the current row height (and other properties) accordingly. I found some solutions in jQuery, but I need to stick to Angular directives only.
demo:
http://jsfiddle.net/o0yvysL5/1/
Preferably, I would require some kind of an event, that I can subscribe to, like <textarea (resize)="resizeEvent($event)" ... but there are none.
Any ideas?
yurzui :
resizable.textarea.directive.ts\n\n@Directive({\n selector: 'textarea[resize]'\n})\nexport class ResizableTextAreaDirective {\n @Output() resize = new EventEmitter();\n\n width: number;\n height: number;\n\n mouseMoveListener: Function;\n\n @HostListener('mousedown', ['$event.target'])\n onMouseDown(el) {\n this.width = el.offsetWidth;\n this.height = el.offsetHeight;\n this.mouseMoveListener = this.renderer.listen('document', 'mousemove', () => {\n if (this.width !== el.offsetWidth || this.height !== el.offsetHeight) {\n this.resize.emit({ width: el.offsetWidth, height: el.offsetHeight });\n }\n });\n }\n\n @HostListener('document:mouseup')\n onMouseUp(el) {\n this.ngOnDestroy();\n }\n\n constructor(private renderer: Renderer2) {}\n\n ngOnDestroy() {\n if (this.mouseMoveListener) {\n this.mouseMoveListener();\n }\n }\n}\n\n\nUse it as follows:\n\n<textarea (resize)=\"resizeEvent($event)\"></textarea>\n\n\nStackblitz Example",
2017-11-07T13:59:10