public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

import {
  AfterViewInit,
  Directive,
  ElementRef,
  HostListener,
  Renderer2,
} from '@angular/core';

@Directive({
  selector: '[textareaResize]',
})
export class TextareaDirective implements AfterViewInit {
  textareaHeight: string = '';

  constructor(public renderer: Renderer2, public element: ElementRef) {}

  ngAfterViewInit() {
    this.resize();
    this.setTextareaHeight();
  }

  @HostListener('keyup', ['$event']) onKeyDown(e: KeyboardEvent) {
    const isCut = e.ctrlKey && e.key === 'x';
    const isDelete = e.key === 'Delete';
    if (isCut || isDelete) {
      this.resize('auto');
    } else {
      this.resize();
    }
    this.setTextareaHeight();
  }

  setTextareaHeight() {
    this.renderer.setStyle(
      this.element.nativeElement,
      'height',
      this.textareaHeight
    );
  }

  resize(initialHeight: any = null) {
    const textarea = this.element.nativeElement;
    this.textareaHeight = initialHeight ?? textarea.height;

    if (textarea.scrollHeight > textarea.clientHeight) {
      this.textareaHeight = `${textarea.scrollHeight}px`;
    }
  }
}