How to pass data dynamically into ion-checkbox

Ionic Framework
1

My html code :

<ion-item *ngFor="let i of event_options" (ionChange)="select_eventOption($event)">
          <ion-label>{{ i }}</ion-label>
          <ion-checkbox value="{{ i }}"></ion-checkbox>
</ion-item>

My .ts code :

event_options = ['option1', 'option2', 'option3'];

Now i need to dynamically select any one of the checkbox by passing a data from my .ts page. can anyone help me…

2

Have you tried binding [ngModel]?

1 Like
3

yes tried… i just manually declared a value like this in my .ts file,

event_options_result = ['option2'];

and passed the value like this in html page,

<ion-item *ngFor="let i of event_options" (ionChange)="select_eventOption($event)">
          <ion-label>{{ i }}</ion-label>
          <ion-checkbox [ngModel]="event_options_result " value="{{ i }}"></ion-checkbox>
</ion-item>

it didn’t work it makes all the checkbox true

4

You need to change your html like this
html
<ion-item *ngFor=“let i of event_options” (ionChange)=“select_eventOption($event)”>

<ion-label>{{ i }}</ion-label>

<ion-checkbox id="{{i }}" value="{{ i }}"></ion-checkbox></ion-item>

and your typescript
event_options = [‘option1’, ‘option2’, ‘option3’];

then you can use dom method
document.getElementById(‘option2’)[‘checked’] = true;

5

Why an array? The only thing that makes sense to bind a checkbox to to me is a scalar boolean.

I very rarely see a need for document in an Ionic app, and I don’t see it here.

1 Like