Select/deselect all options in a dynamically created ion-select

@ko5win wrote:

How do I implement a select/ deselect all function in my check-boxes that are rendered dynamically from server?

HTML

<ion-select [(ngModel)]="selectedvalue" multiple="true" (ionChange)="checkState($event)">
    <ion-option (ionSelect)="selector()">Select/Deselect All</ion-option>
    <ion-option *ngFor="let item of optionsList" value="{{item.value}}" selected="{{item.checked}}">{{item.text}}</ion-option>
</ion-select>

TS

this.optionsList.push({value: 1, text: "Pizza", checked: false });
this.optionsList.push({value: 2, text: "Sushi", checked: false });

I have tried to update the optionsList through a listener on the select all option.

public selector(){
    for (var i = 0; i < this.optionsList.length; i++) {
      this.optionsList[i].checked = true;
    }
    console.log(this.optionsList)
}

Console log displays that the optionsList’s checked is updated accordingly, but the display side does not update accordingly. If I implement a deep copy array inside my method, then my situation would be the same as this user’s post . What I wanted was if the user clicked on the select all checkbox, it should immediately show all checkboxes are checked, vice versa. Please advise thanks.

Posts: 1

Participants: 1

Read full topic