Association
You can associate the Label with a Kendo UI for Angular or other Angular component, as well as with an HTML element.
To achieve this outcome, wrap the HTML element or Angular component within a <kendo-label> element, or associate them by using the for input property.
The Label supports association with the following components and elements:
Kendo UI for Angular Components
To provide the label functionality for Kendo UI for Angular components, use either of the following approaches:
- Wrap the component within a
<kendo-label>element, or - Associate it through the
forproperty by providing a template reference variable that points to the component.
The following example demonstrates various components that are associated with a Label.
Other Angular Components
To associate your own Angular components with the Kendo UI for Angular Label, use either of the following approaches:
- Ensure that the components have a method named
focus. This method will be invoked on a label click, and will hold the custom logic to programmatically focus the necessary internal HTML element. - Associate the components through the
forproperty by providing a template reference variable that points to the component.
As long as the custom component has the proper template reference variable binding, you can place it either within or outside the
<kendo-label></kendo-label>tag.
The following example demonstrates a custom input component that is associated with a Label.
HTML Inputs
To provide the label functionality for regular HTML elements, use either of the following approaches:
- 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.