Setting <label for={{}}> breaks ionic


Ionic 2
when iterating through objects in an array with *ngFor I cant set a value for the “for” property on a label. This results in the page not loading. Other properties on the label work fine. e.g. “name”, “id” etc.
<ion-item *ngFor="#object of array"> <input type="checkbox" id={{}}> <label for={{}}>{{}}</label> </ion-item>

Anyone know a work around? I don’t want to use the <ion-checkbox> as I have my own custom check box.


You have to use attribute binding instead of property binding, i.e. try this way:

<ion-item *ngFor="#object of array">
    <input type="checkbox""{{}}">
    <label attr.for="{{}}">{{}}</label>

For property binding you can use the htmlFor property (see HTMLLabelElement docs):

    <label htmlFor="{{}}">{{}}</label>

Detailed information is available in the docs about Angular 2 Template Syntax.