My component is designed to display a checkbox and label, with inputs for id, name, label, and value.
Here's the code:
<div class="checkbox col-xs-12" *ngIf="id && name && label && value">
<input type="checkbox" [id]="id" [name]="name" [value]="value">
<label [for]="id" id="{{id}}-label" aria-label="not here">{{label}}</label>
</div>
However, when binding the id attribute of the input and the for attribute of the label using [], clicking on the label doesn't work.
If I manually set the id and for attributes, they function correctly.
Even using [attr.id] and [attr.for] doesn't solve the issue.
Any ideas what could be causing this?
The resulting HTML appears as follows:
<div _ngcontent-wam-3="" class="checkbox col-xs-12">
<input _ngcontent-wam-3="" type="checkbox" ng-reflect-id="bob" id="bob" ng-reflect-name="bobby" name="bobby" ng-reflect-value="true" value="true">
<label _ngcontent-wam-3="" aria-label="not here" ng-reflect-html-for="bob" for="bob" ng-reflect-id="bob-label" id="bob-label">Checkbox 1</label>
</div>