• Getting Started
  • Components
    • Barcodes
    • Buttons
    • Chartsupdated
    • Conversational UIupdated
    • Data Query
    • Date Inputsupdated
    • Date Math
    • Dialogs
    • Drawing
    • Dropdownsupdated
    • Editor
    • Excel Export
    • File Saver
    • Filter
    • Gantt
    • Gauges
    • Gridupdated
    • Icons
    • Indicators
    • Inputsupdated
    • Labels
    • Layout
    • ListBox
    • ListView
    • Map
    • Menus
    • Navigation
    • Notification
    • Pager
    • PDF Export
    • PDFViewer
    • PivotGridupdated
    • Popup
    • ProgressBars
    • Ripple
    • Schedulerupdated
    • ScrollView
    • Sortable
    • Spreadsheetupdated
    • ToolBar
    • Tooltips
    • TreeList
    • TreeView
    • Typography
    • Uploads
    • Utilities
  • Styling & Themes
  • Common Features
  • Project Setup
  • Knowledge Base
  • Sample Applications
  • FAQ
  • Troubleshooting
  • Updates
  • Changelogs
Components / Inputs / API / TextAreaComponent / 
New to Kendo UI for Angular? Start a free 30-day trial

TextAreaComponent

Represents the Kendo UI TextArea component for Angular.

Selector

kendo-textarea

Export Name

Accessible in templates as #kendoTextAreaInstance="kendoTextArea"

Inputs

NameTypeDefaultDescription

adornmentsOrientation

TextAreaAdornmentsOrientation

Specifies the orientation of the TextArea adornments. This property is used in order to specify the adornments' position relative to themselves.

The possible values are:

  • horizontal(Default) —TextArea adornments are placed from left to right in ltr, and from right to left in rtl mode.
  • vertical—TextArea adornments are placed from top to bottom.

cols

number

Specifies the visible width of the textarea element (in average character width).

disabled

boolean

false

Sets the disabled state of the TextArea component. To learn how to disable the component in reactive forms, refer to the article on Forms Support.

fillMode

InputFillMode

The fillMode property specifies the background and border styles of the TextArea (see example).

The possible values are:

  • flat
  • solid (default)
  • outline
  • none

flow

TextAreaFlow

Specifies the flow direction of the TextArea sections. This property is useful when adornments are used, in order to specify their position in relation to the textarea element.

The possible values are:

  • vertical(Default) —TextArea sections are placed from top to bottom.
  • horizontal—TextArea sections are placed from left to right in ltr, and from right to left in rtl mode.

inputAttributes

{[key: string]: string}

Sets the HTML attributes of the inner focusable input element. Attributes which are essential for certain component functionalities cannot be changed.

maxlength

number

Specifies the maximum number of characters that the user can enter in the TextArea component.

placeholder

string

The hint, which is displayed when the Textarea is empty.

readonly

boolean

false

Sets the read-only state of the TextArea component.

resizable

TextAreaResize

Configures the resize behavior of the TextArea.

The possible values are:

  • vertical(Default)—The TextArea component can be resized only vertically.
  • horizontal—The TextArea component can be resized only horizontally.
  • both—The TextArea component can be resized in both (horizontal and vertical) directions.
  • auto—Specifies whether the TextArea component will adjust its height automatically, based on the content.
  • none—The TextArea cannot be resized.

rounded

InputRounded

The rounded property specifies the border radius of the TextArea (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • none

rows

number

Specifies the visible height of the textarea element in lines.

selectOnFocus

boolean

false

Determines whether the whole value will be selected when the TextArea is clicked. Defaults to false.

showPrefixSeparator

boolean

false

Specifies whether the prefix separator of the TextArea is rendered. If a prefix template is not declared, the separator will not be rendered, regardless of the parameter value.

showSuffixSeparator

boolean

false

Specifies whether the suffix separator of the TextArea is rendered. If a suffix template is not declared, the separator will not be rendered, regardless of the parameter value.

size

InputSize

The size property specifies the padding of the internal textarea element (see example).

The possible values are:

  • small
  • medium (default)
  • large
  • none

tabindex

number

Specifies the tabindex of the component.

title

string

Sets the title attribute of the internal textarea input element of the component.

value

string

Provides a value for the TextArea component.

Fields

NameTypeDefaultDescription

input

ElementRef<any>

Represents the visible textarea element of the component.

Events

NameTypeDescription

inputBlur

EventEmitter<any>

Fires each time the internal textarea element gets blurred. This event is useful when adornments are used, in order to distinguish between blurring the textarea element and blurring the whole TextArea component.

inputFocus

EventEmitter<any>

Fires each time the user focuses the internal textarea element of the component. This event is useful when you need to distinguish between focusing the textarea element and focusing one of its adornments.

blur

EventEmitter<any>

Fires each time the TextArea component gets blurred.

To wire the event programmatically, use the onBlur property.

@Component({
selector: 'my-app',
template: `
 <kendo-textarea (blur)="handleBlur()"></kendo-textarea>
`
})
class AppComponent {
  public handleBlur(): void {
     console.log('Component is blurred');
  }
}

focus

EventEmitter<any>

Fires each time the user focuses the TextArea component.

To wire the event programmatically, use the onFocus property.

@Component({
selector: 'my-app',
template: `
 <kendo-textarea (focus)="handleFocus()"></kendo-textarea>
`
})
class AppComponent {
  public handleFocus(): void {
     console.log('Component is focused.');
  }
}

valueChange

EventEmitter<any>

Fires each time the value is changed or the component is blurred (see example). When the component value is changed programmatically or via its form control binding, the valueChange event is not emitted.

Methods

blur

Blurs the TextArea component.

focus

Focuses the TextArea component.

@Component({
selector: 'my-app',
template: `
 <button (click)="textarea.focus()">Focus the textarea</button>
 <kendo-textarea #textarea></kendo-textarea>
`
})
class AppComponent { }

updateValue

Parameters

value

string

In this article

Not finding the help you need?

Contact Support