TextAreaComponent
Represents the Kendo UI TextArea component for Angular.
Selector
kendo-textarea
Export Name
Accessible in templates as #kendoTextAreaInstance="kendoTextArea"
Inputs
cols
number
Specifies the visible width of the textarea element (in average character width).
disabled
boolean
(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 inltr
, and from right to left inrtl
mode.
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
(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
number
Specifies the visible height of the textarea element in lines.
selectOnFocus
boolean
(default: false)
Determines whether the whole value will be selected when the TextArea is clicked. Defaults to false
.
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
input
ElementRef
Represents the visible textarea element of the component.
Events
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