Currently, I have a checkbox list on my page. Whenever a user selects the "Save" button, the checked items should be removed from the list and moved to the saved tab that is also displayed. While I have successfully implemented the functionality for removing an item, I am looking for guidance on how to determine whether an item is checked before removing it. Any help would be greatly appreciated. Thank you!
HTML
<ion-content class="checks">
<div [ngSwitch]="messages">
<ion-list active *ngSwitchCase="'received'">
<ion-item>
<ion-label>Select All</ion-label>
<ion-checkbox (click)="checkAll()" [(ngModel)]="selectedAll" ></ion-checkbox>
</ion-item>
<ion-item *ngFor="let rmessage of rmessages; index as i">
<ion-label>{{rmessage.text}}</ion-label>
<ion-checkbox [checked]="selectedAll" [(ngModel)]="singleChecked.checked" ></ion-checkbox>
</ion-item>
<button ion-button full (click)="save($index)" >Save</button>
</ion-list>
<ion-list radio-group *ngSwitchCase="'sent'">
<ion-list-header>Saved Messages</ion-list-header>
<ion-item>
<p>Saved message here</p>
</ion-item>
</ion-list>
</div>
</ion-content>
TypeScript
import { Component } from '@angular/core';
import { TranslateService } from '@ngx-translate/core';
import { NavController, PopoverController, ViewController, ToastController } from 'ionic-angular';
@Component({
selector: 'page-messages',
templateUrl: 'messages.html'
})
export class MessagesPage {
selectedAll: boolean = false;
messages: string = 'messages';
findIndex: any;
singleChecked: boolean = false;
rmessages: any[] = [
{ text: 'This is a test message.' },
{ text: 'This is a second test message.' },
{ text: 'This is a third test message.' }
]
constructor(public navCtrl: NavController, public popoverCtrl: PopoverController, private toastCtrl: ToastController) {
this.messages = 'received';
}
ionViewDidLoad() {
}
checkAll(){
console.log(this.messages.length)
if(this.selectedAll){
this.selectedAll = true
}
else {
this.selectedAll = false
}
}
save(index){
this.rmessages.splice(
this.rmessages.indexOf(index), 1)
}
}