Basic Usage

The Label component enables you to associate labels with focusable Angular components or HTML elements.

import { Component, ViewEncapsulation } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
    selector: 'my-app',
    template: `
        <div class="example">
            <form class="k-form" [formGroup]="form">
                <h5>COURSE REGISTRATION FORM</h5>
                <kendo-label text="Full Name">
                    <input kendoTextBox [formControlName]="'fullName'" />
                </kendo-label>
                <kendo-label text="Email">
                    <input [formControlName]="'email'" kendoTextBox #email/>
                </kendo-label>
                <kendo-label [for]="age" text="Age (18+)"></kendo-label>
                <kendo-numerictextbox #age [formControlName]="'age'" format="n0"></kendo-numerictextbox>
                <div class="k-form-buttons">
                    <button class="k-button k-primary" [disabled]="!form.valid" (click)="submitForm()">Register</button>
                    <button class="k-button" (click)="clearForm()">Clear</button>
                </div>
            </form>
        </div>
    `,
    encapsulation: ViewEncapsulation.None,
    styles: [`
        .example {
            display: flex;
            justify-content: center;
        }

        .k-form kendo-label:not(:last-of-type) {
            flex-direction: column;
            margin-bottom: 10px;
        }
    `]
})
export class AppComponent {
    public form: FormGroup;

    public data: any = {
        fullName: '',
        email: '',
        age: 0
    };

    constructor() {
        this.form = new FormGroup({
            fullName: new FormControl(this.data.fullName, [Validators.required]),
            email: new FormControl(this.data.email, [Validators.required, Validators.email]),
            age: new FormControl(this.data.age, [Validators.required, Validators.min(18)])
        });
    }

     public submitForm(): void {
        console.log(this.form.value);
    }

     public clearForm(): void {
        this.form.reset();
    }
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Association

Wrap the HTML element or Angular component within a <kendo-label> element, or associate them by using the for input property.

• Kendo UI for Angular Components
• Other Angular Components
• HTML Inputs

Kendo UI for Angular Components

To provide the label functionality for Kendo UI for Angular components you could:

• Wrap the component within a <kendo-label> element or
• Associate them through the for property by providing a template reference variable that points to the component.

The following example demonstrates various components, associated with a Label.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <kendo-label text="Enter date">
                <kendo-datepicker [(ngModel)]="date" name="date">
                </kendo-datepicker>
            </kendo-label>
            <kendo-label text="Enter age">
                <kendo-numerictextbox [(ngModel)]="age" name="age">
                </kendo-numerictextbox>
            </kendo-label>
            <kendo-label [for]="sizeDropdown" text="Choose size"></kendo-label>
            <kendo-dropdownlist
                #sizeDropdown
                [data]="listItems"
                [(ngModel)]="size"
                name="size">
            </kendo-dropdownlist>
        </div>
    `,
    styles: [`
        .wrapper {
            padding-bottom: 20px;
        }
    `]
})
export class AppComponent {
    public listItems = ['X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'];
    public date: Date;
    public age: number;
    public size: string;
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DateInputsModule } from '@progress/kendo-angular-dateinputs';
import { InputsModule } from '@progress/kendo-angular-inputs';
import { DropDownsModule } from '@progress/kendo-angular-dropdowns';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        ReactiveFormsModule,
        DateInputsModule,
        DropDownsModule,
        InputsModule,
        LabelModule
    ]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Other Angular Components

To associate your own Angular components with the Kendo Label, ensure that they have a method named focus. This method will be invoked on label click, and should hold the custom logic to programmatically focus the necessary internal HTML element.

To provide the label functionality for the custom Angular components, associate them through the for property by providing a template reference variable that points to the component. The custom component can be placed either within or outside of the <kendo-label></kendo-label> tag, as long as it has the proper template reference variable binding.

The following example demonstrates a custom Input component, associated with a Label.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <kendo-label [for]="firstNameInput" text="Enter first name">
                <my-input #firstNameInput [(ngModel)]="firstName"></my-input>
            </kendo-label>
            <kendo-label [for]="lastNameInput" text="Enter last name">
            </kendo-label>
            <my-input #lastNameInput [(ngModel)]="lastName"></my-input>
        </div>
    `
})
export class AppComponent {
    public firstName = 'John';
    public lastName = 'Doe';
}

import {
    Component,
    forwardRef,
    ElementRef,
    ViewChild
} from '@angular/core';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

export const MY_INPUT_VALUE_ACCESSOR: any = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => InputComponent),
    multi: true
  };

@Component({
    selector: 'my-input',
    template: `
        <input #input
            (input)="onChange($event.target.value)"
            [value]="value"
            class="k-textbox"
        />
    `,
    providers: [MY_INPUT_VALUE_ACCESSOR]
})
export class InputComponent implements ControlValueAccessor {
    @ViewChild('input') private input: ElementRef;

    private _value = '';

    // The `focus` method required for components to be associated with kendo-label.
    // Handles focusing the necessary internal HTML element programmatically.
    public focus(): void {
        this.input.nativeElement.focus();
    }

    // ControlValueAccessor methods and logic

    public onChange: any = () => {};
    public onTouch: any = () => {};

    public set value(value: string) {
        this._value = value;
        this.onChange(value);
        this.onTouch(value);
    }

    public get value(): string {
        return this._value;
    }

    public writeValue(value: any): void {
        this.value = value;
    }

    public registerOnChange(fn: any): void {
        this.onChange = fn;
    }

    public registerOnTouched(fn: any): void {
        this.onTouch = fn;
    }
}

import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';
import { InputComponent } from './my-input.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent, InputComponent],
    imports:      [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        LabelModule
    ]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

HTML Inputs

To provide the label functionality for regular HTML Elements you could:

• Wrap the HTML element within a <kendo-label> element or
• Associate them through the for property by providing the id value of the HTML element or a template reference variable that points to it.

This following example demonstrates the approaches in action.

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

@Component({
    selector: 'my-app',
    template: `
        <div class="wrapper">
            <h5>Associate by a template reference</h5>
            <kendo-label
                text="Enter First Name"
                [for]="nameInput">
            </kendo-label>
            <input #nameInput [(ngModel)]="firstName" kendoTextBox name="firstName" />
        </div>
        <div class="wrapper">
            <h5>Associate by an element's id</h5>
            <kendo-label
                text="Enter Last Name"
                for="last-name">
            </kendo-label>
            <input [(ngModel)]="lastName" kendoTextBox name="lastName" id="last-name" />
        </div>
        <div class="wrapper">
            <h5>Wrap the input</h5>
            <kendo-label
                text="Enter Email">
                <input [(ngModel)]="email" kendoTextBox name="email" />
            </kendo-label>
        </div>
    `,
    styles: [`
        .wrapper {
            padding-bottom: 20px;
        }
    `]
})
export class AppComponent {
    public firstName: string;
    public lastName: string;
    public email: string;
}

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { TextBoxModule } from '@progress/kendo-angular-inputs';
import { LabelModule } from '@progress/kendo-angular-label';
import { AppComponent } from './app.component';

@NgModule({
    bootstrap:    [AppComponent],
    declarations: [AppComponent],
    imports:      [BrowserModule, BrowserAnimationsModule, FormsModule, ReactiveFormsModule, TextBoxModule, LabelModule]
})
export class AppModule {}

import { AppModule } from './app.module';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule, { preserveWhitespaces: true });

Optional Text

The Label component allows indicating a form field as optional by using the optional input property. When it is set to true the text Optional will be rendered as part of the Label text.

@Component({
    selector: 'my-app',
    template: `
        <kendo-label
            text="Street Number"
            [optional]="true">
            <kendo-numerictextbox></kendo-numerictextbox>
        </kendo-label>
    `
})
class AppComponent { }

The optional text could be changed or localized via custom messages or the Angular i18n framework.The Label component also provides built-in RTL support.

Refer to the following Globalization article for further details and runnable demos.

Label Directive

By using the [for] property binding, the Label directive associates a label HTML element with focusable Angular components or HTML elements.

To associate a focusable Angular component set the for property binding by providing a template reference variable that points to the component.

To associate a focusable HTML element, set the for property binding by providing the id value of the HTML element.

Both approaches are demonstrated in the following example:

@Component({
    selector: 'my-app',
    template: `
        <div class="row">
            <div class="col-xs-12 col-md-6 example-col">
                <label [for]="age">Age: </label>
                <kendo-datepicker #age></kendo-datepicker>
            </div>
            <div class="col-xs-12 col-md-6 example-col">
                <label [for]="'age'">Age: </label>
                <input id="age" />
            </div>
        </div>
    `
})
class AppComponent { }

Suggested Links

• API Reference of the Label
• API Reference of the Label directive