diff --git a/projects/common/components/input-elements/text-area.component.ts b/projects/common/components/input-elements/text-area.component.ts
index 773d62b88ec388272345df35bbcfe6c8b659d1a4..50caa10613cc17ed45ae45aa98ae236487c9eff1 100644
--- a/projects/common/components/input-elements/text-area.component.ts
+++ b/projects/common/components/input-elements/text-area.component.ts
@@ -1,8 +1,5 @@
-import {
-  Component, Input, AfterViewInit
-} from '@angular/core';
+import { Component, Input } from '@angular/core';
 import { TextAreaElement } from 'common/models/elements/input-elements/text-area';
-import { delay, Observable, of } from 'rxjs';
 import { TextInputComponent } from 'common/directives/text-input-component.directive';
 
 @Component({
@@ -33,11 +30,11 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
                 autocorrect="off"
                 spellcheck="false"
                 value="{{elementModel.value}}"
-                [rows]="(isViewInitialized | async) && elementModel.hasDynamicRowCount ?
-                            (elementModel.expectedCharactersCount | updateTextareaRows:
-                                input.offsetWidth:
-                                elementModel.styling.fontSize) :
-                            elementModel.rowCount"
+                dynamicRows
+                [expectedCharactersCount]="elementModel.expectedCharactersCount"
+                [fontSize]="elementModel.styling.fontSize"
+                (dynamicRowsChange)="dynamicRows = $event"
+                [rows]="elementModel.hasDynamicRowCount && dynamicRows ? dynamicRows : elementModel.rows"
                 [attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
                 [formControl]="elementFormControl"
                 [readonly]="elementModel.readOnly"
@@ -59,12 +56,7 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
     ':host ::ng-deep .no-label .mat-form-field-outline-gap {border-top-color: unset !important}'
   ]
 })
-export class TextAreaComponent extends TextInputComponent implements AfterViewInit {
+export class TextAreaComponent extends TextInputComponent {
   @Input() elementModel!: TextAreaElement;
-
-  isViewInitialized: Observable<boolean> = of(false);
-
-  ngAfterViewInit(): void {
-    this.isViewInitialized = of(true).pipe(delay(0));
-  }
+  dynamicRows: number = 0;
 }
diff --git a/projects/common/directives/dynamic-rows.directive.ts b/projects/common/directives/dynamic-rows.directive.ts
new file mode 100644
index 0000000000000000000000000000000000000000..15224f3e788c36090b55594f8ec753144269aac1
--- /dev/null
+++ b/projects/common/directives/dynamic-rows.directive.ts
@@ -0,0 +1,44 @@
+import {
+  AfterViewInit, Directive, ElementRef, EventEmitter, HostListener, Input, OnChanges, Output, SimpleChanges
+} from '@angular/core';
+
+@Directive({
+  selector: '[dynamicRows]'
+})
+export class DynamicRowsDirective implements AfterViewInit, OnChanges {
+  @Input() fontSize!: number;
+  @Input() expectedCharactersCount!: number;
+  @Output() dynamicRowsChange: EventEmitter<number> = new EventEmitter<number>();
+
+  @HostListener('window:resize') onResize() {
+    // guard against resize before view is rendered
+    this.calculateDynamicRows();
+  }
+
+  constructor(public elementRef: ElementRef) {}
+
+  ngAfterViewInit(): void {
+    this.calculateDynamicRows();
+  }
+
+  calculateDynamicRows(): void {
+    // give the textarea time to render before calculating the dynamic row count
+    setTimeout(() => {
+      const averageCharWidth = this.fontSize / 2;
+      if (this.elementRef.nativeElement.offsetWidth) {
+        this.dynamicRowsChange.emit(
+          Math.ceil((
+            this.expectedCharactersCount * averageCharWidth) /
+            this.elementRef.nativeElement.offsetWidth
+          )
+        );
+      }
+    });
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.fontSize || changes.expectedCharactersCount) {
+      this.calculateDynamicRows();
+    }
+  }
+}
diff --git a/projects/common/pipes/update-textarea-rows.pipe.spec.ts b/projects/common/pipes/update-textarea-rows.pipe.spec.ts
deleted file mode 100644
index 0c99a0bbe05b4cdcf742515fa2f4e3867342e74f..0000000000000000000000000000000000000000
--- a/projects/common/pipes/update-textarea-rows.pipe.spec.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-import { UpdateTextareaRowsPipe } from './update-textarea-rows.pipe';
-
-describe('UpdateRowsPipe', () => {
-  it('create an instance', () => {
-    const pipe = new UpdateTextareaRowsPipe();
-    expect(pipe).toBeTruthy();
-  });
-});
diff --git a/projects/common/pipes/update-textarea-rows.pipe.ts b/projects/common/pipes/update-textarea-rows.pipe.ts
deleted file mode 100644
index 25b658cc76c34392d11eccaeef5c33bd4a64c70d..0000000000000000000000000000000000000000
--- a/projects/common/pipes/update-textarea-rows.pipe.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Pipe, PipeTransform } from '@angular/core';
-
-@Pipe({
-  name: 'updateTextareaRows'
-})
-export class UpdateTextareaRowsPipe implements PipeTransform {
-  transform(expectedCharactersCount: number, inputWidth: number, fontSize: number): number {
-    const averageCharWidth = fontSize / 2; // s. AverageCharWidth of dotNet
-    return Math.ceil((expectedCharactersCount * averageCharWidth) / inputWidth);
-  }
-}
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index 5abb50f1fcbfd36ce290570af68f0961595b4648..4100364162a2de18a330245a3dfce9c84a0360b3 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line max-classes-per-file
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
@@ -25,6 +26,7 @@ import { HotspotImageComponent } from 'common/components/input-elements/hotspot-
 import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
 import { ScrollPagesPipe } from 'common/pipes/scroll-pages.pipe';
 import { MathEditorModule } from 'common/math-editor.module';
+import { DynamicRowsDirective } from 'common/directives/dynamic-rows.directive';
 import { TextComponent } from './components/text/text.component';
 import { ButtonComponent } from './components/button/button.component';
 import { TextFieldComponent } from './components/input-elements/text-field.component';
@@ -71,7 +73,6 @@ import { GeometryComponent } from './components/geometry/geometry.component';
 import { MathAtanPipe } from './pipes/math-atan.pipe';
 import { MathDegreesPipe } from './pipes/math-degrees.pipe';
 import { ArrayIncludesPipe } from './pipes/array-includes.pipe';
-import { UpdateTextareaRowsPipe } from './pipes/update-textarea-rows.pipe';
 import { SpinnerComponent } from './components/spinner/spinner.component';
 import { GetValuePipe, MathFieldComponent } from './components/input-elements/math-field.component';
 
@@ -138,10 +139,10 @@ import { GetValuePipe, MathFieldComponent } from './components/input-elements/ma
     MathAtanPipe,
     MathDegreesPipe,
     ArrayIncludesPipe,
-    UpdateTextareaRowsPipe,
     SpinnerComponent,
     GetValuePipe,
-    MathFieldComponent
+    MathFieldComponent,
+    DynamicRowsDirective
   ],
   exports: [
     CommonModule,