Setting <label for={{object.id}}> breaks ionic

Ionic Framework ionic-v3
1

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={{object.id}}> <label for={{object.id}}>{{object.name}}</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.

2

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

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

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

    <label htmlFor="{{object.id}}">{{object.name}}</label>

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

1 Like