ionic-framework: ngModel not working on ion-checkbox and ion-toggle, have to watch for click event

From @colinjlacy on January 1, 2016 19:2

Hi, I’m having trouble trying to apply the ngModel directive to ion-toggle and ion-checkbox. If I try the following:

<ion-toggle [(ngModel)]="listItem.active">{{listItem.name}}</ion-toggle>

I get the this error:

I was able to get it to work by binding one-way to the checked property, and then listening for a (click) with a component event handler:

<ion-toggle checked="{{listItem.active}}" (click)="toggleActive(listItem)">{{listItem.name}}</ion-toggle>

Am I missing something or is this the intended functionality? And if it is that’s totally fine; I’m just wondering if this is the way I should implement going forward.

Copied from original issue: driftyco/ionic2#842

About this issue

Original URL
State: closed
Created 8 years ago
Comments: 28 (16 by maintainers)

Most upvoted comments

I’d like to say that adding this option [ngModelOptions]="{standalone: true}" solves the problem, the whole markup is written this way

<ion-toggle color="positive" [(ngModel)]="removeLogo" [ngModelOptions]="{standalone: true}"></ion-toggle>

super-iterator on Jul 26, 2017

@sonoman The correct markup for it is:

<ion-checkbox [(ngModel)]="confirmed"></ion-checkbox>

Please refer to the Angular 2 cheatsheet: https://angular.io/docs/ts/latest/guide/cheatsheet.html

Thanks!

brandyscarney on Aug 5, 2016