import { Input , AfterViewInit , ElementRef , HostListener , Directive } from '@angular/core' ; @ Directive ( { selector : 'textarea[autosize]' } ) export class Autosize implements AfterViewInit { private el : HTMLElement ; private _minHeight ! : string ; private _maxHeight ! : string ; private _clientWidth : number ; @ Input ( 'minHeight' ) get minHeight ( ) { return this . _minHeight ; } set minHeight ( val ) { this . _minHeight = val ; this . updateMinHeight ( ) ; } @ Input ( 'maxHeight' ) get maxHeight ( ) { return this . _maxHeight ; } set maxHeight ( val ) { this . _maxHeight = val ; this . updateMaxHeight ( ) ; } @ HostListener ( 'window:resize' , [ '$event.target' ] ) onResize ( _textArea ) { if ( this . el . clientWidth === this . _clientWidth ) return ; this . _clientWidth = this . element . nativeElement . clientWidth ; this . adjust ( ) ; } @ HostListener ( 'input' , [ '$event.target' ] ) onInput ( _textArea ) { this . adjust ( ) ; } constructor ( public element ) { this . el = element . nativeElement ; this . _clientWidth = this . el . clientWidth ; } ngAfterViewInit ( ) { const style = window . getComputedStyle ( this . el , undefined ) ; if ( style . resize === 'both' ) { this . el . style . resize = 'horizontal' ; } else if ( style . resize === 'vertical' ) { this . el . style . resize = 'none' ; } this . adjust ( ) ; } adjust ( ) { if ( this . el . style . height == this . element . nativeElement . scrollHeight + 'px' ) return ; this . el . style . overflow = 'hidden' ; this . el . style . height = 'auto' ; this . el . style . height = this . el . scrollHeight + 'px' ; } updateMinHeight ( ) { this . el . style . minHeight = this . _minHeight + 'px' ; } updateMaxHeight ( ) { this . el . style . maxHeight = this . _maxHeight + 'px' ; } }