Label Overview
The Label enables you to associate the label HTML element with focusable Angular components or HTML elements.
Basic Usage
By using the [for] property binding, the Label directive associates the label HTML element with focusable Angular components or HTML elements.
Angular Components
To associate a focusable Angular component, set the for property binding by providing a template reference variable that points to the component.
@Component({
selector: 'my-app',
template: `
<div class="row example-wrapper" style="min-height: 450px;">
<div class="col-xs-12 col-md-6 example-col">
<label [for]="age">Age: </label>
<kendo-datepicker #age></kendo-datepicker>
</div>
</div>
`
})
class AppComponent { }HTML Elements
To associate a focusable HTML element, set the for property binding by providing the id value of the HTML element.
@Component({
selector: 'my-app',
template: `
<div class="row example-wrapper" style="min-height: 450px;">
<div class="col-xs-12 col-md-6 example-col">
<label [for]="'age'">Age: </label>
<input id="age" />
</div>
</div>
`
})
class AppComponent { }