Issue with label ID

Ionic Framework ionic-v3
1

Hi, I have a problem, I was setting up checkboxes on a dinamically generated list, after I got them working as intended, I noticed that the IDs for my labels aren’t working as intended:

<ion-item *ngFor="let jug of player1.jugadores; let i = index" >
      <ion-label id="{{jug}}" (click)="presentAlert(jug,equipo1,pb.el.id)" slot="start" >{{jug}} 
          <ion-badge #ppb id="1pun{{i}}" color="danger">0</ion-badge>
          <ion-badge #pb id="1per{{i}}" color="primary">0</ion-badge>
          <ion-badge #bb id="1tec{{i}}" color="warning">0</ion-badge>
     </ion-label>
     <ion-checkbox slot="end" [(ngModel)]="pl1[i].selected"></ion-checkbox>
</ion-item>

The ID for each should be a name like “Arturo” or “Jose”, instead it gives “ion-cb-0-lbl”, “ion-cb-1-lbl” and so on, I checked if my component was returning the proper names for the front-end and it is, plus the {{jug}} in the label text is showing the name:

nameID
nameID1344×286 83.2 KB

Edit: I discovered that the cause of the problem is the checkbox itself, removing it fixes the problem, but I still want to use it, what can I do with it? Thank you

2

If the ID really gets overrided on frontend I would bypass it by setting the ID in the name attribute. name="{{jug}}" and then get the element by the name property.

If name is also already given you could at least create a custom property on the elements like data-id="{{jug}}" and then get the element by this custom property.


<ion-item *ngFor="let jug of player1.jugadores; let i = index" >
      <ion-label data-id="{{jug}}" (click)="presentAlert(jug,equipo1,pb.el.id)" slot="start" >{{jug}} 
          <ion-badge #ppb id="1pun{{i}}" color="danger">0</ion-badge>
          <ion-badge #pb id="1per{{i}}" color="primary">0</ion-badge>
          <ion-badge #bb id="1tec{{i}}" color="warning">0</ion-badge>
     </ion-label>
     <ion-checkbox slot="end" [(ngModel)]="pl1[i].selected"></ion-checkbox>
</ion-item>
1 Like
3

Ionic uses that id property of checkbox labels in order to implement accessibility for assistive technologies like screen readers, so you’re going to have to use an alternative property like @reinerluke97 is suggesting.

1 Like
4

Thanks for the help, I still have much to learn about Ionic.