2 files changed, 57 insertions, 0 deletions
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts
new file mode 100644
index 0000000..6f3c1e4
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.spec.ts
@@ -0,0 +1,8 @@
+import { TextareaDirective } from './textarea.directive';
+
+describe('TextareaDirective', () => {
+  it('should create an instance', () => {
+    const directive = new TextareaDirective();
+    expect(directive).toBeTruthy();
+  });
+});
diff --git a/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts
new file mode 100644
index 0000000..dbb1dc0
--- /dev/null
+++ b/public/projects/angular-small-apps/apps/recipes/src/app/shared/directives/textarea.directive.ts
@@ -0,0 +1,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`;
+    }
+  }
+}