Ionic2 with checkbox - ionic2

Question

I might sound old, but i am new for ionic 2. i wrote a code in ionic 2 for checkbox and it is working well but how do i retrieve the count of the checked boxes
Below is the code i have.
checklist.ts code
import { Component } from '#angular/core';
import { NavController, NavParams, Alert } from 'ionic-angular';
#Component({
templateUrl: 'build/pages/checklist/checklist.html',
})
export class ChecklistPage {
checklist:any;
constructor(public nav: NavController, public navParams: NavParams) {
this.checklist = this.navParams.get('checklist');
}
addItem(): void {
let prompt = Alert.create({
title: 'Add Item',
message: 'Enter the name of the task for this checklist below:',
inputs:[
{
name: 'name'
}
],
buttons:[
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.checklist.addItem(data.name);
}
}
]
});
this.nav.present(prompt);
}
toggleItem(item): void {
this.checklist.toggleItem(item);
}
removeItem(item): void {
this.checklist.removeItem(item);
}
renameItem(item): void {
let prompt = Alert.create({
title: 'Rename Item',
message: 'Enter the new name of the task for this checklist below:',
inputs: [
{
name: 'name'
}
],
buttons: [
{
text: 'Cancel'
},
{
text: 'Save',
handler: data => {
this.checklist.renameItem(item,data.name);
}
}
]
});
this.nav.present(prompt);
}
checkallItems(): void {
this.checklist.items.forEach((item) => {
if(!item.checked){
this.checklist.toggleItem(item);
}
});
}
uncheckItems(): void {
this.checklist.items.forEach((item) => {
if(item.checked){
this.checklist.toggleItem(item);
}
});
}
}
checklist.html
<ion-header>
<ion-navbar secondary>
<ion-title>{{checklist.title}} #(checkeditem)/{{checklist.items.length}}</ion-title>
<ion-buttons end>
<button (click)="checkallItems()">
<ion-icon name="checkbox"></ion-icon>
</button>
<button (click)="uncheckItems()">
<ion-icon name="refresh-circle"></ion-icon>
</button>
<button (click)="addItem()">
<ion-icon name="add-circle"></ion-icon>
</button>
</ion-buttons>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list no-lines>
<ion-item-sliding *ngFor="let item of checklist.items" class="home-sliding-item">
<ion-item>
<ion-label>{{item.title}}</ion-label>
<ion-checkbox [checked]="item.checked" (click)="toggleItem(item)" class="checklist-item"></ion-checkbox>
</ion-item>
<ion-item-options>
<button light (click)="renameItem(item)">
<ion-icon name="clipboard"></ion-icon>Edit
</button>
<button danger (click)="removeItem(item)">
<ion-icon name="trash"></ion-icon>Delete
</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

Answer 1

You can add a method in your ChecklistPage like this:
public getItemsCount(): number {
let count= 0;
for(let i=0; i<this.checklist.items.length; i++) {
if(this.checklist.items[i].checked){
count++;
}
}
return count;
}
Or following the checkallItems() method:
public getItemsCount(): number {
let count= 0;
this.checklist.items.forEach((item) => {
if(item.checked){
count++;
}
});
return count;
}
And then in your view:
<ion-title>{{checklist.title}} #{{getItemsCount()}}/{{checklist.items.length}}</ion-title>