TextAreaComponent

Represents the Kendo UI TextArea component for Angular.

Selector

kendo-textarea

Export Name

Accessible in templates as #kendoTextAreaInstance="kendoTextArea"

Inputs

cols

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

disabled

(default: false) Sets the disabled state of the TextArea component.

flow

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.

maxlength

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

placeholder

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

readonly

(default: false) Sets the read-only state of the TextArea component.

resizable

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.

rows

Specifies the visible height of the textarea element in lines.

selectOnFocus

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

tabindex

Specifies the tabindex of the component.

title

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

value

Provides a value for the TextArea component.

Fields

input

Represents the visible textarea element of the component.

Events

inputBlur

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

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

Fires each time the TextArea component gets blurred.

To wire the event programmatically, use the onBlur property.

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

focus

Fires each time the user focuses the TextArea component.

To wire the event programmatically, use the onFocus property.

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

valueChange

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.

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

updateValue

Parameters

value