I’m not sure whether I’m being a bit stupid or not but what I want to do is display two toggles and when either one is clicked, the other toggle is unclicked i.e they are the reverse of each other and only one can be set to ON. I first tried using the (ionChange) event on the toggles but when one of the toggles sets the value of the other toggle, that toggle’s event fires and you end up in an endless loop (is there a way around that?). My next option was to forget (ionChange) all-together and instead simply use the [checked] input. So what I have is:
<ion-toggle [(ngModel)]="check1" [checked]="!check2"></ion-toggle> <ion-toggle [(ngModel)]="check2" [checked]="!check1"></ion-toggle>
in my component I have:
check1:boolean = true; check2:boolean = false;
The strange things is that this only works for the SECOND toggle on the page. If I switch the second toggle, it correcly switches the first toggle off and on. But whenever I click the first toggle I get the error message:
ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: ‘true’. Current value: ‘false’
Does anyone know what’s going on here? And is there a better way??