Angular TextArea - Overview

The TextArea is a UI component that enables a user to enter and edit a multi-line text.

View Demo

The following code adds a simple TextArea with a placeholder to your page.

HTML
TypeScript
  • <dx-text-area
  • placeholder="Type a text here...">
  • </dx-text-area>
  • import { DxTextAreaModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextAreaModule
  • ],
  • // ...
  • })

By default, the TextArea checks the entered text for spelling errors. To disable this feature, assign false to the spellcheck property.

HTML
TypeScript
  • <dx-text-area
  • [spellcheck]="false">
  • </dx-text-area>
  • import { DxTextAreaModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextAreaModule
  • ],
  • // ...
  • })

If an end user should not be able to edit the text in the TextArea, assign true to the readOnly property. In this case, make sure to set the value property too.

HTML
TypeScript
  • <dx-text-area
  • value="The text that should not be edited"
  • [readOnly]="true">
  • </dx-text-area>
  • import { DxTextAreaModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxTextAreaModule
  • ],
  • // ...
  • })
See Also