client/src/app/shared/forms/textarea-autoresize.directive.ts

   1 // Thanks: https://github.com/evseevdev/ngx-textarea-autosize
   2 import { AfterViewInit, Directive, ElementRef, HostBinding, HostListener } from '@angular/core'
   3
   4 @Directive({
   5   selector: 'textarea[myAutoResize]'
   6 })
   7 export class TextareaAutoResizeDirective implements AfterViewInit {
   8   @HostBinding('attr.rows') rows = '1'
   9   @HostBinding('style.overflow') overflow = 'hidden'
  10
  11   constructor (private elem: ElementRef) { }
  12
  13   public ngAfterViewInit () {
  14     this.resize()
  15   }
  16
  17   @HostListener('input')
  18   resize () {
  19     const textarea = this.elem.nativeElement as HTMLTextAreaElement
  20     // Reset textarea height to auto that correctly calculate the new height
  21     textarea.style.height = 'auto'
  22     // Set new height
  23     textarea.style.height = `${textarea.scrollHeight}px`
  24   }
  25 }