2 way binding ion-checkbox

Ionic Framework ionic-v3
1

Dears,

 I have the following code:

   <ion-item *ngFor="let cp of carspecialtyList; let i = index;">
        <ion-label>{{cp.specialty}}</ion-label>
        <ion-checkbox  checked=false [(ngModel)] = "cp.$key" id="{{cp.$key}}" 
                                 (ionChange)="datachanged($event, cp.$key, cp.specialty)">
        </ion-checkbox>
      </ion-item>

 i need to create a loop on typescript where i'll check the checkbox if certain criteria are met.

 NOTE: the $key is a firebase key.

 Is there a way where i can use the document.getelementbyId to do a check if a criteria is met?

Please help i’m dying here.

Regards,

2

you can also bind the checked to a boolean property of the cp object, like :
<ion-checkbox [checked]=“cp.checked”…>

based on your criteria, you can change the values of all *.checked, and the ui will follow.

3

Thanks Roye for the reply. I’ll try explaining myself more with examples.

I have a list of garages on a page and I’ve created a button that will push to the specialty page with the $key of the garage passed as parameter.

The specialty page contains a list example {Electrical, Mechanic, Cooling …etc.}.10%20AM

Initially the checkboxes on the specialty page are unchecked. Now checking them and saving into firebase is working, however, i need to implement a function that will check these checkboxes incase the link between the garage and the specialty exists (one to many relationship).

In typescript loading the list of specialties is done by the below function:

ngOnInit(){

var x =  this.fbp.getCarSpecialty();
x.snapshotChanges().subscribe(item =>{
  this.carspecialtyList = [];
  item.forEach(element =>{
  var y = element.payload.toJSON();
  y['$key'] = element.key;
  this.carspecialtyList.push(y as Carspecialty);

  //Function that i'm trying to fix
  this.checkIfAvailable(element.key, this.cpindex);

  });
});

}

checkIfAvailable(key, i){
const garageKey = this.navParams.get(“garage_id”);
this.afd.database.ref(’/garageSpecialty/’ + garageKey + “/” + key).once(‘value’).then(function(snapshot) {

//here where i need to check the checkbox if not null
if (snapshot.val() != null){
    console.log("From inside checkIfAvailable: " + snapshot.key);
  
  }

});

}

The HTML for Loading the specialty page

      <ion-item *ngFor="let cp of carspecialtyList; let i = index;">
        <ion-label>{{cp.specialty}}</ion-label>
        <ion-checkbox [checked]='cp.checked' [(ngModel)] = "cp.specialty" id="{{cp.specialty}}" (ionChange)="datachanged($event, cp.$key, cp.specialty)"></ion-checkbox>
       
      </ion-item>

</ion-list>

Now how can I check the checkbox based on the findings of the checkIfAvailable(key, i) function ?

Regards,

4

Create an empty map variable ( let specialityCheck = {} ).
In you load code ( part of the ngOnInit ) start populate it with the relationship of [speciality]->[garage].
if ( y.key in specialityCheck ) {
// some other garage has this speciality… how to handle thing ?
}else{
// no conflict,
specialityCheck[y.key]=true;
}

Based on your code, the checkIfAvaiable is calling the backend to do the check. As the list would be large, and the snapshot can be called here and then, your APP will show slow performance. so, try to check it on your app side.

Just in general, try to minimize backend communication when possible.

I hope this will help you,
Roye