Click on ion-label to toggle the ion-toggle

Question

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

*I am gone through many solutions* - please post some if not one of it at the least. — ruth, May 29 '20 at 08:06
You can go with work around which is on the ion toggle add #mytoggle and on label add attribute (click)="mytoggle.toggle()" , maybe its not .toggle but for sure there is a method to trigger it.. — Mostafa Harb, May 29 '20 at 08:07
Please don't use the tags ionic3 and ionic4 for ionic5, there are differences. It would help greatly to post some code too, because now that Ionic became framework agnostic, there are different ways to use it. Also toggles don't do that by default (see linked page), you must implement it yourself, a bit like @MostafaHarb indicated, but I think it's rather by using `(click)="mytoggle.checked = true" ` — Kaddath, May 29 '20 at 08:10
The documentation you linked does not list an example of what you are trying to do therefore I would not think this is directly possible. — jBuchholz, May 29 '20 at 08:10
Add a sample of your code and then let us see how we can help... — Mostafa Harb, May 29 '20 at 08:39

score 3 · Accepted Answer · answered May 29 '20 at 09:16

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

score 1 · Answer 2 · edited May 29 '20 at 14:07

1

In ts file : Declare:

@ViewChild('mytoggle', {static: true}) mytoggle: IonToggle;

changeToggle() {
    const toggle = this.mytoggle.checked;
    toggle = !toggle;
}

In html :

 <ion-item>
            <ion-label (click)="changeToggle()">remember me</ion-label>
            <ion-toggle class="button">
   </ion-toggle>
          </ion-item>

edited May 29 '20 at 14:07

Tomas Vancoillie

3,463
2
29
45

answered May 29 '20 at 08:56

Mostafa Harb

1,558
1
6
12

score 1 · Answer 3 · answered Mar 02 '22 at 19:15

Hi, the solution for everything will be:

<ion-toggle color="danger" [(ngModel)]="myvar" [checked]="myvar" (ionChange)=myMethod()></ion-toggle>

Inside your component:

myMethod() {
    console.log(">>>>: " + this.myvar);
    if (this.myvar) {
      //do something
    } else {
      //do something
    } 
  }

Hope this solve every question.

score 0 · Answer 4 · answered Mar 31 '21 at 09:42

The Solutions above only working with one toggle. If you have a dynamic From, you need the following:

TS File:

changeToggle(fieldname) {
    const fieldValue = JSON.parse(this.form.get(fieldname).value);
    this.form.controls[fieldname].setValue(!fieldValue);
}

HTML File:

<ion-label (click)="changeToggle(item.name)">{{item.label}}:</ion-label>
    <ion-toggle formControlName="{{item.name}}"
                (ionChange)="settingsChange($event)">
</ion-toggle>

Click on ion-label to toggle the ion-toggle

4 Answers4