TextAreaComponent

Represents the Kendo UI TextArea component for Angular.

Selector

kendo-textarea

Export Name

Accessible in templates as #kendoTextAreaInstance="kendoTextArea"

Inputs

Name	Type	Default	Description
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

Name	Type	Default	Description
input	ElementRef<any>		Represents the visible textarea element of the component.

Events

Name	Type	Description
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. ts @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. ts @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. ts @Component({ selector: 'my-app', template: ` <button (click)="textarea.focus()">Focus the textarea</button> <kendo-textarea #textarea></kendo-textarea> ` }) class AppComponent { }

updateValue
Parameters value string