All Components

Label Overview

The Label directive associates a focusable Angular component or HTML element with a label HTML element.

Basic Usage

The following example demonstrates the Label directive in action.

@Component({
  selector: 'my-app',
  template: `
   <div class="example-config">
     Click on the label text to focus the associated input.
   </div>
   <div class="row example-wrapper" style="min-height: 450px;">
     <div class="col-xs-12 col-md-6 example-col">
       <label [for]="datepicker">DatePicker: </label>
       <kendo-datepicker #datepicker></kendo-datepicker>
     </div>

    <div class="col-xs-12 col-md-6 example-col">
      <label [for]="'input'">Input: </label>
      <input id="input" />
    </div>
  </div>
  `
})
class AppComponent { }

Installation

  1. Download and install the package:

    npm install --save @progress/kendo-angular-label
  2. Once installed, import the LabelModule in your application root module:

    import { NgModule } from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { LabelModule } from '@progress/kendo-angular-label';
    import { AppComponent } from './app.component';
    
    @NgModule({
       bootstrap:    [AppComponent],
       declarations: [AppComponent],
       imports:      [BrowserModule, LabelModule]
    })
    export class AppModule {
    }
  3. You are required to install one of the Kendo UI themes for Angular to style your component. For more information on how to add the styles, refer to the article on getting started.

Dependencies

The Label package requires you to install the following peer dependencies in your application:

  • @angular/common
  • @angular/core
  • rxjs

Features

The Label provides association to:

Association to 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 { }

Association to 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