diff options
Diffstat (limited to 'client/src/app/shared/forms/textarea-autoresize.directive.ts')
-rw-r--r-- | client/src/app/shared/forms/textarea-autoresize.directive.ts | 25 |
1 files changed, 25 insertions, 0 deletions
diff --git a/client/src/app/shared/forms/textarea-autoresize.directive.ts b/client/src/app/shared/forms/textarea-autoresize.directive.ts new file mode 100644 index 000000000..f8c855c16 --- /dev/null +++ b/client/src/app/shared/forms/textarea-autoresize.directive.ts | |||
@@ -0,0 +1,25 @@ | |||
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 | } | ||