Ionic2 ion-toggle get value on ionChange

Question

I have this toggle here:

<ion-toggle (ionChange)="notify(value)"></ion-toggle>

When I click this I want to call the method notify passing the toggle value by parameter. How I can get the toggle value?

Thank you!

and then in your function `notify(event:any) { console.log(event.target.value); }` — Ivar Reukers, Nov 22 '16 at 09:58

score 37 · Accepted Answer · edited Jun 20 '20 at 09:12

37

Just like you can see in Ionic2 Docs - Toggle, a better way to do that would be to bind the toggle to a property from your component by using ngModel.

Component code:

public isToggled: boolean;

// ...

constructor(...) {
  this.isToggled = false;
}

public notify() {
  console.log("Toggled: "+ this.isToggled); 
}

View:

<ion-toggle [(ngModel)]="isToggled" (ionChange)="notify()"></ion-toggle>

This way, you don't need to send the value because it's already a property from your component and you can always get the value by using this.isToggled.

UPDATE

Just like @GFoley83 mentioned on his comment:

Be very careful with ionChange when it's bound directly to ngModel. The notify method will get called when the value bound to ngModel changes, either from the view via someone clicking the toggle or in your component via code e.g. when you do a fresh GET call. I had an issue recently whereby clicking the toggle triggered a PATCH, this meant that every other client would automatically trigger a PATCH when the data bound to the toggle changed.

We used: <ion-toggle [ngModel]="isToggled" (ngModelChange)="notifyAndUpdateIsToggled()"></ion-toggle> to get around this

edited Jun 20 '20 at 09:12

Community

1
1

answered Nov 22 '16 at 10:46

sebaferreras

44,206
11
116
134

1

Thanks @sebaferreras, this helped! – tanay jha Mar 28 '17 at 16:40
1

this works thanks, you can also remove the round brackets from [(ngModel)] – Ruben Jul 24 '17 at 00:55
You're right @Ruben! I just left it there like this to keep it consistent with Ionic docs, but thanks to bring that out :) – sebaferreras Jul 24 '17 at 06:45
1

Be very careful with `ionChange` when it's bound directly to `ngModel`. The `notify` method will get called when the value bound to `ngModel` changes, either from the view via someone clicking the toggle or in your component via code e.g. when you do a fresh `GET` call. I had an issue recently whereby clicking the toggle triggered a `PATCH`, this meant that every other client would automatically trigger a `PATCH` when the data bound to the toggle changed. We used `` to get around this. – GFoley83 May 18 '18 at 03:59
1

Thanks @GFoley83 I've added your comment to the answer :) – sebaferreras May 18 '18 at 09:16
1

I have used (click) to get ngModel value from ion-toggle in .ts file, but it had random mis-launch sometimes. However, after changed to (ngModelChange), the problem solved. Thanks – Qin Wang May 24 '18 at 09:02
Glad to hear that @QinWang :) – sebaferreras May 24 '18 at 13:55
How would you go about this if the toggle is dynamically generated with ngFor where the amount of toggle to be generated is unknown. This method only works for static toggles or if you always have a set amount. – DFSFOT Jan 03 '19 at 14:19

score 18 · Answer 2 · edited Dec 28 '18 at 09:52

18

You can use $event in ionChange.

View:

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

Controller:

notify(event) {
   console.log(event.checked);   
}

edited Dec 28 '18 at 09:52

Ashish Viradiya

389
9
17

answered May 25 '17 at 10:27

Jaydeep Kataria

817
10
22

1

That's `undefined` in Ionic 5 – doup Jun 02 '20 at 07:20
This is not valid in latest version. Use the ngModel and onChange combined. or use event.currentTarget.checked. – karmjit singh Mar 16 '21 at 01:57
1

Solution for Ionic 5: https://stefvanlooveren.me/blog/get-ion-toggle-value-ionic5-and-angular-12 – Stef Van Looveren Feb 23 '22 at 10:37

score 5 · Answer 3 · answered Nov 22 '16 at 10:10

There are 2 ways of checking.

First one is like @Chathuranga Silva suggested

html

<ion-toggle (ionChange)="notify($event)"></ion-toggle>

ts

notify(event: any) { console.log("toggled: "+event.target.checked); }

Second one would be something like this:

html

<ion-toggle (ionChange)="notify()" [checked]="isToggled"></ion-toggle>

ts

var isToggled: boolean = true;

notify() {
  console.log("toggled: "+ this.isToggled); 
}

Which one you pick is up to you, I'd recommend the second one since it will be easier to manipulate the toggle in the constructor/onInit, and easier using this value outside the notify() method.

score 1 · Answer 4 · answered Aug 11 '22 at 07:54

1

You can use $event in ionChange.

View:

<ion-toggle (ionChange)="onChange($event)"></ion-toggle>

Controller:

onChange(ev) {
   console.log(ev.target.checked);   
}

answered Aug 11 '22 at 07:54

Hammad Ahmad

184
1
6

score -1 · Answer 5 · edited Jun 13 '17 at 08:48

-1

Use this

<ion-toggle id="availabilityButton" [(ngModel)]="setOffOrnot"
(ionChange)="setAvailability()"></ion-toggle>

setAvailability(e) {
  this.setOffOrnot = ...
}

edited Jun 13 '17 at 08:48

danday74

52,471
49
232
283

answered Jun 13 '17 at 07:27

CNB

275
1
3
6

Ionic2 ion-toggle get value on ionChange

5 Answers5