CODEWITHSUNDEEP
htmlangularkendo-uikendo-ui-angular2
boop
boop

Reputation: 7787

How can I set the "for" attribute of a label to a kendo-textbox thats projected with <ng-content>?

I want to create a component info-label that adds an icon next to the label.

As a very simple sketch it should look like this

(label) (i)
(input field)

This is what my component looks like

<div class="label-container">
  <kendo-label class="k-form" [text]="text"></kendo-label>
  <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon>  
</div>

<ng-content></ng-content>

I've tried a couple of ways to set the for attribute properly so that a click on the label selects the input. But I could get none of them to work.

This is how I use the component. My component has an @Input() for: string|undefined; that I used in the template (without success)

<info-label text="ID" info="Identifier bla bla" for="foo">
  <kendo-textbox id="foo"></kendo-textbox>
</info-label>

Can't get this to work no matter what.

When I use a vanilla input and use [for] it works just fine. Like so

component

<div class="label-container">
  <kendo-label class="k-form" [text]="text" [for]="for" />
  <kendo-icon *ngIf="info" name="info" themeColor="info" [title]="info"></kendo-icon> 
</div>

<ng-content></ng-content>

usage

<info-label text="ID" info="Identifier bla bla" for="bar">
  <input type="text" id="bar">
</info-label>

Upvotes: 1

Views: 575

Answers (1)

tonythewest
tonythewest

Reputation: 516

Unfortunately, there doesn't appear to be a way to do this with a single label and input. One way that this can be handled though is by wrapping the code in an <ng-container> tag and moving the *ngIf directive into that container.

Here is an example for a label and textbox:

<ng-container *ngIf="someBoolean">
    <kendo-label [for]="someInput" text="Some Input:"></kendo-label>
    <kendo-textbox #someInput [(ngModel)]="SomeValue" ></kendo-textbox>
</ng-container>

<ng-container *ngIf="!someBoolean">
    <kendo-label [for]="someInput" text="Some Input:"></kendo-label>
    <kendo-textbox #someInput [(ngModel)]="SomeOtherValue" ></kendo-textbox>
</ng-container>

Upvotes: 0

Related Questions