I’m working on an Ionic v2+ app that requires some extra logic to be executed when a toggle switch, also known as a radio button, is changed. In Ionic this component is called an ion-toggle. I tried using the normal Angular.io decorators like (change) or (click) but none of them were firing. What I didn’t realize, mainly because I didn’t see it in the Ionic documents was that in order to handle changes in the state I needed to use the (ionChange) decorator on the component. With this I could pass in more details to the function being executed.
<ion-toggle id="toggle{{parent.name}}{{child.name}}"
[(ngModel)]="child.selected"
(ionChange)="onChildSelection(parent.name, child.name, child.selected)">
</ion-toggle>
In the above example the id of the component is being set to include the name of the parent and child. The state is based on the child.selected state which in this case is a boolean value.