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

Question

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>