How to dynamically set ion-toggle checked attribute

Issue

i am setting ion-toggle checked attribute through the value of a condition that returns boolean

<ion-toggle slot="end" checked="setting.is_activated === 1" name="setting"></ion-toggle>

the ion-toggle is always checked on true even when the returned value from the condition is false

Solution

This will not work as all you are doing here is setting the NON-ANGULAR attribute checked to a string value of "settings.is_activated === 1" and any non-null, non-zero value will evaluate to true in this way.

What you want to do is

<ion-toggle slot="end" [checked]="setting.is_activated === 1" name="setting"></ion-toggle>

Note the addition of the open and close brackets. This tells the runtime to attached first to the angular context and evaluate your if statement as desired. It is the RESULT of this evaluation which will be passed the plain checked attribute as true or false.

Answered By – E. Maggini

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published