[Fixed] Click on ion-label to toggle the ion-toggle

Issue

I am creating a page with ionic 5.

I am making a ‘remember me’ button with use of <ion-toggle>.

<ion-item>
    <ion-label>remember me</ion-label>
    <ion-toggle class="button"></ion-toggle>
</ion-item>

The Ion-toggle is working fine, but I can’t toggle it by clicking on the label next to it.

I have tried many solutions.

The link for the API documentation is: https://ionicframework.com/docs/api/toggle

Is there any way to make both the ion toggle and the text clickable?

I’m using ionic angular

Thanks in advance

Solution

This is how you can do:

• add a Ionic id to the toggle with for example #mytoggle
• use the id in the (click) of the label to toggle the .checked property

code:

<ion-item>
    <ion-label (click)="mytoggle.checked = !mytoggle.checked">remember me</ion-label>
    <ion-toggle #mytoggle class="button"></ion-toggle>
</ion-item>

Try it in stackblitz