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

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.
  • horizontalTextArea sections are placed from left to right in ltr, and from right to left in rtl 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

TextAreaResize

Configures the resize behavior of the TextArea.

The possible values are:

  • vertical(Default)The TextArea component can be resized only vertically.
  • horizontalThe TextArea component can be resized only horizontally.
  • bothThe TextArea component can be resized in both (horizontal and vertical) directions.
  • autoSpecifies whether the TextArea component will adjust its height automatically, based on the content.
  • noneThe 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