Angular Text Area

The TextArea component enables users to enter and edit multi-line text. This component can have a fixed or resizable height. The component with the fixed height displays a native scroll bar if the entered text exceeds the text area. If you set the autoResizeEnabled property to true, the TextArea automatically resizes its height to fit the text.

DevExtreme Accessibility Compliance

DevExtreme component libraries meet a variety of WCAG and Section 508 compliance standards. To assess this demo’s accessibility level, click the Run AXE^® Validation button to launch the AXE^® web accessibility evaluation tool.

All trademarks or registered trademarks are property of their respective owners. AXE^® Terms of Use

The overall accessibility level of your application depends on the TextArea features used.

Was this demo helpful?

Thank you!

Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.

Thank you for the feedback!

Backend API

​x
 
<div class="dx-fieldset">
  <div class="dx-fieldset-header">Default Mode</div>  <div class="dx-field">    <dx-check-box      [value]="false"      (onValueChanged)="onCheckboxValueChanged($event)"      text="Limit text length"    >    </dx-check-box>  </div>  <div class="dx-field">    <dx-check-box      [(value)]="autoResizeEnabled"      (onValueChanged)="onAutoResizeChanged($event)"      text="Enable auto resize"    ></dx-check-box>  </div></div><div class="textarea-wrapper">  <dx-text-area    [(height)]="height"    [maxLength]="maxLength"    [(value)]="value"    [(autoResizeEnabled)]="autoResizeEnabled"    [inputAttr]="{ 'aria-label': 'Notes' }"  >  </dx-text-area></div><div class="full-width-content">  <div class="dx-fieldset">    <div class="dx-fieldset-header">Event Handling and API</div>    <div class="dx-field">      <div class="dx-field-label">Synchronize text areas </div>      <div class="dx-field-value">        <dx-select-box          [items]="valueChangeEvents"          valueExpr="name"          [inputAttr]="{ 'aria-label': 'Event' }"          displayExpr="title"          [(value)]="eventValue"        >        </dx-select-box>      </div>    </div>  </div>  <div class="textarea-wrapper">    <dx-text-area      [height]="90"      [(value)]="valueForEditableTextArea"      [valueChangeEvent]="eventValue"      [inputAttr]="{ 'aria-label': 'Notes' }"    >    </dx-text-area>    <dx-text-area      [height]="90"      [readOnly]="true"      [(value)]="valueForEditableTextArea"      [inputAttr]="{ 'aria-label': 'Notes' }"    >    </dx-text-area>  </div></div>​

xxxxxxxxxx
 
import { Component, NgModule, enableProdMode } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';import { DxTextAreaModule, DxCheckBoxModule, DxSelectBoxModule } from 'devextreme-angular';import { DxCheckBoxTypes } from 'devextreme-angular/ui/check-box';import { Service } from './app.service';​if (!/localhost/.test(document.location.host)) {  enableProdMode();}​let modulePrefix = '';// @ts-ignoreif (window && window.config?.packageConfigPaths) {  modulePrefix = '/app';}​@Component({  selector: 'demo-app',  templateUrl: `app/app.component.html`,  styleUrls: [`app/app.component.css`],  providers: [Service],})​export class AppComponent {  valueChangeEvents = [{    title: 'On Change',    name: 'change',  }, {    title: 'On Key Up',    name: 'keyup',  }];​  eventValue: string;​  maxLength = null;​  value: string;​  valueForEditableTextArea: string;​  height = 90;​  autoResizeEnabled: boolean;​  constructor(private service: Service) {    this.valueForEditableTextArea = this.service.getContent();    this.value = this.service.getContent();    this.eventValue = this.valueChangeEvents[0].name;    this.autoResizeEnabled = false;  }​  onCheckboxValueChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {    let str = this.service.getContent();    this.value = value ? str.substring(0, 100) : str;    this.maxLength = value ? 100 : null;  }​  onAutoResizeChanged({ value }: DxCheckBoxTypes.ValueChangedEvent) {    this.height = value ? undefined : 90;  }}​@NgModule({  imports: [    BrowserModule,    DxTextAreaModule,    DxCheckBoxModule,    DxSelectBoxModule,  ],  declarations: [AppComponent],  bootstrap: [AppComponent],})​export class AppModule { }​platformBrowserDynamic().bootstrapModule(AppModule);​

xxxxxxxxxx
 
::ng-deep .full-width-content {
  width: 100%;  margin-top: 30px;}​::ng-deep .full-width-content .textarea-wrapper > .dx-widget {  margin-bottom: 20px;}​::ng-deep .full-width-content .dx-field {  max-width: 385px;}​::ng-deep .textarea-wrapper {  padding: 0 20px;}​

xxxxxxxxxx
 
import { Injectable } from '@angular/core';
​const content = 'Prepare 2013 Marketing Plan: We need to double revenues in 2013 and our marketing strategy is going to be key here. R&D is improving existing products and creating new products so we can deliver great AV equipment to our customers.Robert, please make certain to create a PowerPoint presentation for the members of the executive team.';​@Injectable()export class Service {  getContent() {    return content;  }}​

xxxxxxxxxx
 
// In real applications, you should not transpile code in the browser.
// You can see how to create your own application with Angular and DevExtreme here:// https://js.devexpress.com/Documentation/Guide/Angular_Components/Getting_Started/Create_a_DevExtreme_Application/const componentNames = [  'accordion',  'action-sheet',  'autocomplete',  'bar-gauge',  'box',  'bullet',  'button-group',  'button',  'calendar',  'chart',  'chat',  'check-box',  'circular-gauge',  'color-box',  'context-menu',  'data-grid',  'date-box',  'date-range-box',  'defer-rendering',  'diagram',  'draggable',  'drawer',  'drop-down-box',  'drop-down-button',  'file-manager',  'file-uploader',  'filter-builder',  'form',  'funnel',  'gallery',  'gantt',  'html-editor',  'linear-gauge',  'list',  'load-indicator',  'load-panel',  'lookup',  'map',  'menu',  'multi-view',  'nested',  'number-box',  'pagination',  'pie-chart',  'pivot-grid-field-chooser',  'pivot-grid',  'polar-chart',  'popover',  'popup',  'progress-bar',  'radio-group',  'range-selector',  'range-slider',  'recurrence-editor',  'resizable',  'responsive-box',  'sankey',  'scheduler',  'scroll-view',  'select-box',  'slider',  'sortable',  'sparkline',  'speed-dial-action',  'splitter',  'switch',  'tab-panel',  'tabs',  'tag-box',  'text-area',  'text-box',  'tile-view',  'toast',  'toolbar',  'tooltip',  'tree-list',  'tree-map',  'tree-view',  'validation-group',  'validation-summary',  'validator',  'vector-map',];window.exports = window.exports || {};window.config = {  transpiler: 'ts',  typescriptOptions: {    module: 'system',    emitDecoratorMetadata: true,    experimentalDecorators: true,  },  meta: {    'typescript': {      'exports': 'ts',    },    'devextreme/time_zone_utils.js': {      'esModule': true,    },    'devextreme/localization.js': {      'esModule': true,    },    'devextreme/viz/palette.js': {      'esModule': true,    },    '@angular/platform-browser-dynamic': {      'esModule': true,    },    '@angular/platform-browser': {      'esModule': true,    },    '@angular/core': {      'esModule': true,    },    '@angular/common': {      'esModule': true,    },    '@angular/common/http': {      'esModule': true,    },    '@angular/animations': {      'esModule': true,    },    '@angular/forms': {      'esModule': true,    },    'openai': {      'esModule': true,    },  },  paths: {    'npm:': 'https://unpkg.com/',    'bundles:': 'bundles/',    'externals:': 'bundles/externals/',  },  map: {    'ts': 'npm:plugin-typescript@8.0.0/lib/plugin.js',    'typescript': 'npm:typescript@4.2.4/lib/typescript.js',    'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',    /* @angular */    '@angular/compiler': 'bundles:@angular/compiler.umd.js',    '@angular/platform-browser-dynamic': 'bundles:@angular/platform-browser-dynamic.umd.js',    '@angular/core': 'bundles:@angular/core.umd.js',    '@angular/core/primitives/signals': 'bundles:@angular/core.primitives.signals.umd.js',    '@angular/common': 'bundles:@angular/common.umd.js',    '@angular/common/http': 'bundles:@angular/common-http.umd.js',    '@angular/platform-browser': 'bundles:@angular/platform-browser.umd.js',    '@angular/platform-browser/animations': 'bundles:@angular/platform-browser.umd.js',    '@angular/forms': 'bundles:@angular/forms.umd.js',    /* devextreme */    'devextreme': 'npm:devextreme@24.2.6/cjs',    '@devextreme/runtime': 'npm:@devextreme/runtime@3.0.12',    'devextreme/bundles/dx.all': 'npm:devextreme@24.2.6/bundles/dx.all.js',    'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',    'devexpress-diagram': 'npm:devexpress-diagram@2.2.15',    'devexpress-gantt': 'npm:devexpress-gantt@4.1.60',    /* devextreme-angular umd maps */    'devextreme-angular': 'bundles:devextreme-angular/devextreme-angular.umd.js',    'devextreme-angular/core': 'bundles:devextreme-angular/devextreme-angular-core.umd.js',    'devextreme-angular/http': 'bundles:devextreme-angular/devextreme-angular-http.umd.js',    ...componentNames.reduce((acc, name) => {      acc[`devextreme-angular/ui/${name}`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}.umd.js`;      acc[`devextreme-angular/ui/${name}/nested`] = `bundles:devextreme-angular/devextreme-angular-ui-${name}-nested.umd.js`;      return acc;    }, {}),    'tslib': 'npm:tslib/tslib.js',    'rxjs': 'npm:rxjs@7.5.3/dist/bundles/rxjs.umd.js',    'rxjs/operators': 'npm:rxjs@7.5.3/dist/cjs/operators/index.js',    'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',    'luxon': 'npm:luxon@3.4.4/build/global/luxon.min.js',    'es6-object-assign': 'npm:es6-object-assign',    'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',    'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',    'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',    'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',    'inferno-hydrate': 'npm:inferno-hydrate/dist/inferno-hydrate.min.js',    'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',    'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',    'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',    // Prettier    'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',    'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',  },  packages: {    'app': {      main: './app.component.ts',      defaultExtension: 'ts',    },    'devextreme': {      defaultExtension: 'js',    },    'devextreme/events/utils': {      main: 'index',    },    'devextreme/common/core/events/utils': {      main: 'index',    },    'devextreme/events': {      main: 'index',    },    'es6-object-assign': {      main: './index.js',      defaultExtension: 'js',    },    'rxjs': {      defaultExtension: 'js',    },    'rxjs/operators': {      defaultExtension: 'js',    },  },  packageConfigPaths: [    'npm:@devextreme/*/package.json',    'npm:@devextreme/runtime@3.0.12/inferno/package.json',    'npm:rxjs@7.5.3/package.json',    'npm:rxjs@7.5.3/operators/package.json',    'npm:devexpress-diagram@2.2.15/package.json',    'npm:devexpress-gantt@4.1.60/package.json',  ],};System.config(window.config);// System.import('@angular/compiler').catch(console.error.bind(console));​

xxxxxxxxxx
 
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">  <head>↔</head>​  <body class="dx-viewport">    <div class="demo-container">      <demo-app>Loading...</demo-app>    </div>  </body></html>​

You can also specify the maxLength property to limit the number of characters a user can enter. Note that this property only limits the number of characters for users. You can enter text that exceeds the maximum character length programmatically, but the number of characters displayed to users will still be limited by this property setting.

The TextArea stores the text in the value property and updates it after the DOM event occurs. To specify which DOM event to use instead of the default "change" event, use the valueChangeEvent property. To handle the value change, use the TextArea's onValueChanged function.

Change the text in the Event Handling and API section below to see how this feature works. Use the "Synchronize text areas" drop-down menu to select which event updates the read-only component's value: "change" or "keyup".