Basic Usage
The Label component enables you to associate labels with focusable Angular components or HTML elements.
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
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
forproperty by providing a template reference variable that points to the component.
The following example demonstrates various components, associated with a Label.
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.
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
forproperty by providing theidvalue of the HTML element or a template reference variable that points to it.
This following example demonstrates the approaches in action.
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 { }