Getting Started with Kendo UI for Angular TextBox

The TextBox provides the option for creating composite inputs that can be integrated within forms or used as stand-alone items.

import { Component, ViewEncapsulation } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-textbox placeholder="Type your message here" [clearButton]="true">
            <ng-template kendoTextBoxPrefixTemplate>
                    <button kendoButton look="clear" icon="image"></button>
                    <button kendoButton look="clear" [icon]="'calendar'"></button>
                <kendo-textbox-separator></kendo-textbox-separator>
            </ng-template>
            <ng-template kendoTextBoxSuffixTemplate>
                <kendo-textbox-separator></kendo-textbox-separator>
                <button kendoButton look="clear" class="send-button">Send</button>
            </ng-template>
        </kendo-textbox>
    `,
    styles: [`
        .k-textbox{
            width: 300px;
        }
        .k-button-clear {
            width: 28px;
        }
        .k-textbox .send-button {
            color: #ff6358;
            width: 44px;
        }
        .k-textbox .send-button:hover {
            color: #eb5b51;
        }
    `],
    encapsulation: ViewEncapsulation.None
})
export class AppComponent {}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';
import { IconsModule } from '@progress/kendo-angular-icons';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        FormsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule,
        ButtonsModule,
        IconsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

Functionality and Features

Events

The following example demonstrates basic TextBox events.

import { Component } from '@angular/core';

@Component({
    selector: 'my-app',
    template: `
        <kendo-textbox [style.marginBottom.px]="10"
            placeholder="Event name"
            [clearButton]="true"
            (valueChange)="onChange($event)"
            (focus)="onFocus()"
            (blur)="onBlur()"
            (inputFocus)="onInputFocus()"
            (inputBlur)="onInputBlur()">
            <ng-template kendoTextBoxSuffixTemplate>
                <kendo-textbox-separator></kendo-textbox-separator>
                <button kendoButton look="clear" [icon]="'calendar'"></button>
            </ng-template>
        </kendo-textbox>
        <event-log title="Event log" [events]="events"></event-log>
    `
})
export class AppComponent {
    public events: string[] = [];

    public onChange(value: any): void {
      this.log('valueChange', value);
    }

    public onFocus(): void {
      this.log('focus');
    }

    public onBlur(): void {
      this.log('blur');
    }

    public onInputBlur(): void {
        this.log('inputBlur');
    }

    public onInputFocus(): void {
        this.log('inputFocus');
    }

    private log(event: string, arg: any): void {
        this.events.push(`${event} ${arg || ''}`);
    }
}
import { Component, Input } from '@angular/core';

@Component({
  selector: 'event-log',
  template: `
    <div class="example-config">
      <h5>{{ title }}</h5>
      <ul class="event-log">
        <li *ngFor="let event of events">{{ event }}</li>
      </ul>
    </div>
  `
})
export class EventLogComponent {
  @Input() public title: string;
  @Input() public events: string[];
}
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { ButtonsModule } from '@progress/kendo-angular-buttons';

import { LabelModule } from '@progress/kendo-angular-label';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { AppComponent } from './app.component';
import { EventLogComponent } from './event-log.component';

@NgModule({
    bootstrap: [AppComponent],
    declarations: [AppComponent, EventLogComponent],
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CommonModule,
        InputsModule,
        LabelModule,
        ButtonsModule
    ]
})
export class AppModule {}
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

enableProdMode();

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

In this article