Ionic ion-toggle and radio-group click event?

Question

I am using Ionic3, and would like to have an html element (ion-toggle and radio-group), that if I click on, it fires a javascript function.

As you can see below, I gave added a ng-click attibute based on this, but it does not invoke the javascript function.

Any advise appreciated.

settings.html

<ion-list>
  <ion-item ng-click="notifications()">
    <ion-label>Notifications</ion-label>
    <ion-toggle [(ngModel)]="personModel.notifications" id="notifications">Notifications</ion-toggle>
  </ion-item>
</ion-list>

<br>

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item ng-click="milesKm()">
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

settings.ts

  notifications(): void {
    alert('notifications');
  }

  milesKm(): void {
    alert('milesKm');
  }

Suraj Rao Suraj Rao · Accepted Answer · 2017-05-05T10:21:12

ng-click is an AngularJS (angular 1) syntax and will not work in Angular >= 2.

ion-radio has ionSelect output event and radio-group has ionChange event.

So you can either:

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item>
    <ion-label>Km</ion-label>
    <ion-radio value="0" (ionSelect)="milesKm()"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1" (ionSelect)="milesKm()"></ion-radio>
  </ion-item>
</ion-list>

Or :

 <ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm" (ionChange)="milesKm()">
  <ion-item>
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item ng-click="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

Or ion-item has simple click event.

<ion-list radio-group [(ngModel)]="personModel.milesKm" id="milesKm">
  <ion-item (click)="milesKm()">
    <ion-label>Km</ion-label>
    <ion-radio value="0"></ion-radio>
  </ion-item>
  <ion-item (click)="milesKm()">
    <ion-label>Miles</ion-label>
    <ion-radio value="1"></ion-radio>
  </ion-item>
</ion-list>

Ionic ion-toggle and radio-group click event?

1 Answers