HelpBot Assistant

How can I help you?

Sizing in Angular TextArea Component

26 Feb 202617 minutes to read

Adjust the size of the TextArea by applying specific CSS classes:

Property Description
Small Add the e-small class to render a smaller-sized TextArea.
Bigger Add the e-bigger class to render a larger-sized TextArea.

Apply these classes to customize the TextArea appearance to match your application’s design requirements.

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                  <h4> Small Size </h4>
                  <div className="e-input-group e-small">
                      <ejs-textarea id="default1" className="e-input" placeholder="Enter your comments" (focus)= "onfocus($event)" (blur)="onBlur($event)"></ejs-textarea>
                  </div>

                  <h4> Bigger Size </h4>
                  <div className="e-input-group e-bigger">
                      <ejs-textarea id="default2" className="e-input" placeholder="Enter your comments" (focus)= "onfocus($event)" (blur)="onBlur($event)"></ejs-textarea>
                  </div>
                </div>
              </div>`
})

export class AppComponent {
    public onfocus(args: any): void {
      args.target.parentElement.classList.add("e-input-focus");
    }

    public onBlur(args: any): void {
      args.target.parentElement.classList.remove("e-input-focus");
    }
 }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Filled and Outline Mode

Enable filled and outline modes in the TextArea component by adding the e-outline or e-filled class to the cssClass property. These classes allow you to choose between filled or outline appearance, aligning with your application’s design.

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <label className="custom-input-label"> Filled TextArea </label>
                <div id='container'>
                    <ejs-textarea id='filled' placeholder="Filled" floatLabelType="Auto" cssClass="e-filled"></ejs-textarea>
                </div>
            
                <label className="custom-input-label"> Outlined TextArea </label>
                <div id='container1'>
                    <ejs-textarea id='outlined' placeholder="Outlined" floatLabelType="Auto" cssClass="e-outline"></ejs-textarea>
                </div>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: Filled and Outline theme customization are available only with Material themes.

Custom Styling with CssClass Property in TextArea

The cssClass property provides a powerful way to apply custom styling to the TextArea component. Use this property to apply custom CSS classes to the textarea container, enabling control over styling properties such as color, padding, margins, borders, and more.

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea id='default' placeholder="Enter your comments" floatLabelType="Auto" cssClass="custom-textarea"></ejs-textarea>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Setting the Disabled State in TextArea

Disable the TextArea using the enabled property. Set this property to false to disable the textarea and prevent user interaction.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id='default' enabled="false"></ejs-textarea>
                </div>`
})

export class AppComponent { }

Set the Read-Only TextArea

Make the TextArea read-only using the readonly property. Set this property to true to prevent users from editing the textarea content.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <ejs-textarea id='default' readonly="true" value="Readonly"></ejs-textarea>
                </div>`
})

export class AppComponent { }

Set the Rounded Corner in TextArea

Render the TextArea with rounded corners by adding the e-corner class to the textarea container.

Rounded corners are visible only in box model textarea components.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `<!-- To Render TextArea component. -->
                <div class="wrap">
                  <div class="e-input-group e-corner">
                      <textarea class="e-input" placeholder="Enter your comments"></textarea>
                  </div>
                </div>`
})

export class AppComponent { }

Static Clear Button in TextArea

Display a static clear button in the TextArea component by adding the e-static-clear class to the cssClass property. This class ensures the clear button remains visible at all times, allowing users to easily clear the textarea content without focusing on the control.

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea id='default' placeholder="Enter your comments" cssClass="e-static-clear" showClearButton="true"></ejs-textarea>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Customize the TextArea Background Color and Text Color

Customize TextArea styles such as background color, text color, and border color by overriding the default styles to achieve your desired appearance.

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



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea id='default' placeholder="Enter your comments" floatLabelType="Auto"></ejs-textarea>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Change the Floating Label Color of the TextArea

Change the floating label color for both success and warning validation states by applying the following CSS styles.

    /* For Success state */
    .e-float-input.e-success label.e-float-text,
    .e-float-input.e-success input:focus ~ label.e-float-text,
    .e-float-input.e-success input:valid ~ label.e-float-text {
      color: #22b24b;
    }

    /* For Warning state */
    .e-float-input.e-warning label.e-float-text,
    .e-float-input.e-warning input:focus ~ label.e-float-text,
    .e-float-input.e-warning input:valid ~ label.e-float-text {
      color: #ffca1c;
    }
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextAreaModule} from '@syncfusion/ej2-angular-inputs'



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                  <div>
                      <ejs-textarea id='default1' placeholder="Success" floatLabelType="Auto" cssClass="e-success"></ejs-textarea>
                  </div>
                  <div>
                      <ejs-textarea id='default2' placeholder="Warning" floatLabelType="Auto" cssClass="e-warning"></ejs-textarea>
                  </div>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Adding mandatory asterisk to placeholder

To add a mandatory asterisk (*) to the placeholder in the TextArea component, you can utilize CSS to append the asterisk after the placeholder text.

/* To add asterick to float label in textarea */ 
.e-float-input.e-control-wrapper .e-float-text::after {
  content: '*'; /* Add asterisk after the placeholder */
  color: red; /* Customize asterisk color */
}
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import {TextAreaModule} from '@syncfusion/ej2-angular-inputs'



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

@Component({
imports: [
        
        TextAreaModule
    ],


standalone: true,
    selector: 'app-root',
    template: `<div class="wrap">
                <div class='textarea'>
                <ejs-textarea id='default' placeholder="Enter your comments" floatLabelType="Auto"></ejs-textarea>
                </div>
              </div>`
})

export class AppComponent { }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));