Completed
Last Updated:
16 Jan 2020 18:17
by ADMIN
Created by:
Christoph
Comments:
2
Category:
CheckBox
Type:
Feature Request
Today the checkbox styles work only if we place the label behind the input and connect them use id + for attribute:
<input type="checkbox" id="ch1" class="k-checkbox" checked />
<label class="k-checkbox-label" for="ch1">Checkbox 1</label>Problem:
While it works most times, it quite difficult to ensure a unique id inside an angular component. We have to ensure, it's unique over all currently rendered components.
A clean solution would require something like this:
// MyComponent
let componentIndex = 0;
class MyComponent {
checkboxId: `my-component-${componentIndex++}-checkbox`;
}
// Template
<input type="checkbox" [id]="checkboxId" class="k-checkbox" checked />
<label class="k-checkbox-label" [for]="checkboxId">Checkbox 1</label>Feature request:
Support implicit label association like so:
<label class="k-checkbox"><input type="checkbox" /> My label</label>