import { AfterViewInit , Directive , ElementRef , HostListener , Renderer2 } from '@angular/core' ; @ Directive ( { selector : '[uxAutoGrow]' } ) export class AutoGrowDirective implements AfterViewInit { constructor ( private _elementRef , private _renderer ) { if ( _elementRef . nativeElement . tagName . toLowerCase ( ) !== 'textarea' ) { throw new Error ( 'uxAutoGrow directive can only be used on <textarea> elements.' ) ; } } ngAfterViewInit ( ) { this . update ( ) ; } @ HostListener ( 'input' ) update ( ) { this . _renderer . setStyle ( this . _elementRef . nativeElement , 'overflowY' , 'hidden' ) ; this . _renderer . setStyle ( this . _elementRef . nativeElement , 'height' , 'auto' ) ; const { scrollHeight } = this . _elementRef . nativeElement ; const { maxHeight } = getComputedStyle ( this . _elementRef . nativeElement ) ; const maximum = ! isNaN ( parseFloat ( maxHeight ) ) ? parseFloat ( maxHeight ) : Infinity ; if ( maximum < scrollHeight ) { this . _renderer . setStyle ( this . _elementRef . nativeElement , 'overflowY' , 'auto' ) ; this . _renderer . setStyle ( this . _elementRef . nativeElement , 'height' , maximum + 'px' ) ; } else { this . _renderer . setStyle ( this . _elementRef . nativeElement , 'height' , scrollHeight + 'px' ) ; } } }