TextBoxComponent

Selector

kendo-textbox

Export Name

Accessible in templates as #kendoTextBoxInstance="kendoTextBox"

Inputs

clearButton

boolean

(default: false) Specifies whether a Clear button will be rendered.

clearButtonIcon

string

Sets a custom icon that will be rendered instead of the default one.

disabled

boolean

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

errorIcon

string

Sets a custom icon that will be rendered instead of the default one for invalid user input.

placeholder

string

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

readonly

boolean

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

selectOnFocus

boolean

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

showErrorIcon

IconShowOptions

(default: false) Specifies when the Error icon will be shown (see example).

The possible values are:

  • initialThe Error icon will be displayed when the component state is invalid and touched or dirty.
  • booleanThe Error icon is displayed, if the condition given by the developer is met.

showSuccessIcon

IconShowOptions

(default: false) Specifies when the Success icon will be shown (see example).

The possible values are:

booleanThe Success icon is displayed, if the condition given by the developer is met.

initialThe Success icon will be displayed when the component state is neither invalid nor touched or dirty.

successIcon

string

Sets a custom icon that will be rendered instead of the default one for a valid user input.

tabindex

number

(default: 0) Specifies the tabindex of the TextBox.

title

string

Sets the title attribute of the input element of the TextBox.

value

string

Provides a value for the TextBox.

Fields

input

ElementRef

Represents the visible input element of the TextBox.

Events

inputBlur

EventEmitter<any>

Fires each time the input element gets blurred.

inputFocus

EventEmitter<any>

Fires each time the user focuses the input element.

blur

EventEmitter<any>

Fires each time the TextBox component gets blurred.

To wire the event programmatically, use the onBlur property.

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

focus

EventEmitter<any>

Fires each time the user focuses the TextBox component.

To wire the event programmatically, use the onFocus property.

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

valueChange

EventEmitter<any>

Fires each time the value is changed when the component is blurred or the value is cleared through the Clear button (see example). When the value of the component is programmatically changed to ngModel or formControl through its API or form binding, the valueChange event is not triggered because it might cause a mix-up with the built-in valueChange mechanisms of the ngModel or formControl bindings.

Methods

blur

Blurs the TextBox.

focus

Focuses the TextBox.

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