All Components

Association

By using the [for] property binding, the Label component enables you to associate 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 { }
In this article