Multiline TextBox in Angular TextBox component

21 Aug 202515 minutes to read

The multiline TextBox feature transforms the standard single-line input into a versatile text area that accepts multiple lines of text. This functionality is essential for capturing longer content such as addresses, descriptions, comments, feedback, and detailed user input where space and formatting flexibility are required.

Key Features Overview

The multiline TextBox provides several enhanced capabilities:

  • Multi-line text input: Accept paragraphs and formatted text content
  • Auto-resizing: Automatic height adjustment based on content
  • Manual resizing: User-controlled textarea dimensions
  • Character limits: Built-in text length validation
  • Character counting: Real-time character count display

Prerequisites

Before implementing multiline TextBox, ensure the TextBox module is imported and configured in the Angular application.

Create multiline TextBox

Transform the default TextBox into a multiline TextBox using one of two approaches:

  1. API Configuration: Set the multiline property to true
  2. HTML Element: Pass an HTML5 textarea element directly to the TextBox component

Both methods create a textarea that supports multiple lines of text input with consistent styling and behavior.

The multiline TextBox allows vertical resizing by default, enabling users to adjust the input area height as needed.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'




import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
         FormsModule, TextBoxModule
    ],


standalone: true,
    selector: 'app-container',
    styleUrls: ['./index.css'],
    template: `<div class="multiline">
                <ejs-textbox [multiline]='true' value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center' ></ejs-textbox>
               </div>
              `
})
export class AppComponent {
    constructor() {
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Auto resizing

Create a dynamic multiline TextBox that automatically adjusts its height based on content length. This feature eliminates the need for manual resizing and provides a seamless user experience for varying text lengths.

Implementation requires calculating the textarea height during two key events:

  • Created event: Sets initial height based on existing content
  • Input event: Dynamically updates height as users type or delete text

This approach ensures the textarea expands and contracts smoothly, accommodating both initial values and real-time content changes.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'




import { Component, ViewChild } from '@angular/core';
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
         FormsModule, TextBoxModule
    ],


standalone: true,
    selector: 'app-container',
    styleUrls: ['./index.css'],
    template: `<div class="multiline">
            <ejs-textbox #default [multiline]='true' value= 'Mr. Dodsworth Dodsworth, System Analyst, Studio 103, The Business Center'
                floatLabelType='Auto' placeholder='Enter your address' (created)="createHandler($event)" (input)='inputHandler($event)' ></ejs-textbox>
            </div>
        `
})
export class AppComponent {
    @ViewChild('default')
    public textareaObj?: TextBoxComponent;
    public createHandler(args: any): void {
        (this.textareaObj as TextBoxComponent).addAttributes({rows: 1} as any);
        (this.textareaObj as TextBoxComponent).element.style.height = "auto";
        (this.textareaObj as TextBoxComponent).element.style.height = ((this.textareaObj as TextBoxComponent).element.scrollHeight)+"px";
    }
    public inputHandler(args: any): void {
        (this.textareaObj as TextBoxComponent).element.style.height = "auto";
        (this.textareaObj as TextBoxComponent).element.style.height = ((this.textareaObj as TextBoxComponent).element.scrollHeight)+"px";
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Disable resizing

Prevent users from manually resizing the multiline TextBox by applying CSS styles that disable the resize functionality. This approach maintains consistent layout design and prevents potential UI disruption.

Apply the following CSS styles to remove resize handles and lock the textarea dimensions:

textarea.e-input, 
.e-input-group textarea, 
.e-input-group textarea.e-input, 
.e-input-group.e-input-focus textarea, 
.e-input-group.e-input-focus textarea.e-input, 
.e-input-group.e-control-wrapper textarea, 
.e-input-group.e-control-wrapper.e-input-focus textarea, 
.e-input-group.e-control-wrapper textarea.e-input, 
.e-input-group.e-control-wrapper.e-input-focus textarea.e-input, 
.e-float-input textarea, 
.e-float-input.e-control-wrapper textarea {
    resize: none;
}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'




import { Component, ViewChild } from '@angular/core';

@Component({
imports: [
         FormsModule, TextBoxModule
    ],


standalone: true,
    selector: 'app-container',
    styleUrls: ['./index.css'],
    encapsulation:ViewEncapsulation.None,
    template: `<div class="multiline">
                <ejs-textbox id='default' [multiline]='true' floatLabelType='Auto' placeholder='Enter your address' ></ejs-textbox>
               </div>
              `
})
export class AppComponent {
    constructor() {
    }
}
#container {
    visibility: hidden;
  }
  
  #loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
  }
  
.multiline{
  margin: 30px auto;
  width: 30%;
}

textarea.e-input, 
.e-input-group textarea, 
.e-input-group textarea.e-input, 
.e-input-group.e-input-focus textarea, 
.e-input-group.e-input-focus textarea.e-input, 
.e-input-group.e-control-wrapper textarea, 
.e-input-group.e-control-wrapper.e-input-focus textarea, 
.e-input-group.e-control-wrapper textarea.e-input, 
.e-input-group.e-control-wrapper.e-input-focus textarea.e-input, 
.e-float-input textarea, .e-float-input.e-control-wrapper textarea {
    resize: none;
}

Limit the text length

Control text input length by implementing character limits on the multiline TextBox. This feature helps maintain data consistency and prevents excessive input that might impact performance or storage requirements.

Setting character limits

Set the maximum character limit using the maxLength attribute through the addAttributes method. The TextBox automatically prevents additional input once the limit is reached.

// Add maxLength attribute to limit input to 100 characters
this.textboxObject.addAttributes({ maxLength: '100' });

Removing character limits

Use the removeAttribute method to dynamically remove character restrictions when unlimited text input is required. This provides flexibility for conditional input scenarios.

// Remove maxLength restriction to allow unlimited input
this.textboxObject.removeAttribute('maxLength');
import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'
import { Component, ViewChild } from '@angular/core';
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
    imports: [
        FormsModule, TextBoxModule, ButtonModule
    ],
    standalone: true,
    selector: 'app-container',
    styleUrls: ['./index.css'],
    template: `<label class="label">Add maxlength attribute through inline</label>
                <div class="multiline">
                <ejs-textbox [multiline]='true' maxlength='15' floatLabelType='Auto' placeholder='Enter your address' ></ejs-textbox>
               </div>
               <label class="label">Add maxlength attribute through addAttributes method</label>
                <div class="multiline">
                <ejs-textbox #default [multiline]='true' floatLabelType='Auto' placeholder='Enter your address' ></ejs-textbox>
               </div>
               <button ejs-button id=length (click)='clickHandler($event)'>Add max length</button>
               <button ejs-button id=length (click)='removeAttribute($event)'>Remove max length</button>
               `
})
export class AppComponent {
    @ViewChild('default')
    public textboxObj?: TextBoxComponent;

    public clickHandler(args: any) {
        (this.textboxObj as TextBoxComponent).addAttributes({ maxlength: 15 } as any);
    }
    public removeAttribute(args: any) {
        (this.textboxObj as TextBoxComponent).removeAttributes(['maxlength']);
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Count characters

Provide real-time feedback to users with a character counter that displays current text length and remaining available characters. This feature enhances user experience by showing input progress and helping users stay within defined limits.

The character count updates dynamically during text input, deletion, and paste operations. Implementation involves monitoring the input event of the multiline TextBox and calculating the current character count against any defined maximum limits.

Benefits of character counting include:

  • User guidance: Clear indication of input limits and remaining space
  • Data validation: Prevention of form submission errors due to length constraints
  • User experience: Immediate feedback without requiring form validation
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TextBoxModule } from '@syncfusion/ej2-angular-inputs'




import { Component, ViewChild } from '@angular/core';
import { TextBoxComponent } from '@syncfusion/ej2-angular-inputs';

@Component({
imports: [
         FormsModule, TextBoxModule
    ],


standalone: true,
    selector: 'app-container',
    styleUrls: ['./index.css'],
    template: `<div class="multiline">
                <ejs-textbox #default [multiline]='true' maxlength='25' floatLabelType='Auto' placeholder='Enter your address' (input)='inputHandler($event)' ></ejs-textbox>
               <span id='numbercount'></span>
               </div>
              `
})
export class AppComponent {
     @ViewChild('default')
    public textareaObj?: TextBoxComponent;

    public inputHandler(args: any): void {
        let word: any, addresscountRem, addressCount: string;
        word = this.textareaObj?.element.value;
        addressCount = word.length;
        addresscountRem = document.getElementById('numbercount');
        (addresscountRem as HTMLElement).textContent = addressCount+"/25";
    }
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Best Practices

  • Performance: For auto-resizing TextBoxes, consider applying throttling to resize calculations to maintain responsiveness during rapid input.
  • Validation: Combine character limits with proper error messaging for comprehensive input validation
  • Responsive Design: Test multiline TextBox behavior across different screen sizes and orientations
  • User Experience: Provide clear visual feedback for character limits and validation states