Count how many check boxes checked in Angular 2 typescript?

Question

How to count how many boxes checked in Angular 2/4 using typescript. It should show the count of the check boxes checked, and if unchecked it should decrement to 0.

My example, data coming from server, which I loop through:

I know how to do it using foreach function in Angularjs, but cant understand how to do this in Typescript, generally I have to replace angular foreach method with Typescript foreach method? Need help

app.ts

  data = [
     {"name":"jason"},
     {"name":"james"},
     {"name":"josh"},
     {"name":"joshua"}
          ];



calculateChecked = function() {            
 let count = 0;

  angular.forEach(this.data, function(value) {    //don't work in typescript
    if(value.checked)
      count++;
  });

  return count;
   };
  };

app.htm

 <li class="list-group-item" *ngFor="let user of data">
    <input type="checkbox" [ngModel]="user.checked"/>
    {{user.name}}
    </li>


    <p>total checked: {{calculateChecked()}}</p>

should show:

And if unchecked should show 0

  <div class="sasha-ui-list" #em *ngFor="let email of emails; let i=index"
   (click)="onAddtoMessage(email)"> <div class="row"> <div class="col-lg-1">
  <input class="magic-checkbox sasha_checkbox" name="emails" type="checkbox" 
  id="{{email.id}}" value="email" [checked]="checkboxFlag"> <label for="
 {{email.id}}"></label> </div>

Aravind · Accepted Answer · 2017-11-22 12:03:22Z

3

You should make it to 0 when clicked as below,

 changed(){
    this.count = 0;
    this.data.forEach(item=>{
      console.log(item)
      if(item.checked){
        this.count= this.count+1
      }  
    } )
  }


<ul> <li class="list-group-item" *ngFor="let user of data">

<input type="checkbox" [(ngModel)]="user.checked" (ngModelChange)="changed()"/>
{{user.name}}
</li>

LIVE DEMO

answered Nov 22, 2017 at 12:03

Aravind

41.7k16 gold badges97 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

AlexFF1 Over a year ago

great answer and example, but I can't add key checked to the array

Aravind Over a year ago

@OleksandrFedorov can you clone the array and append a property?

AlexFF1 Over a year ago

don't really want to do this, as I will have loads of data

Aravind Over a year ago

can you list me out all constraints please :(

AlexFF1 Over a year ago

is there are any way to count without adding property to array, as I will have custom data coming from server. Each object is linked to a check box. What I need to do is count increment/decrement how many boxes selected. Cant realy understand how it was counted here without adding checked property plnkr.co/edit/9Ad7qerU7MMQBZApIhkx?p=preview

|

Alexander_F · Accepted Answer · 2017-11-22 11:52:25Z

2

not tested code, but something like this should work, if data is an array

 this.data.map((value) => {
     if(value.checked)
       count++;   
 });

answered Nov 22, 2017 at 11:52

Alexander_F

2,8873 gold badges30 silver badges62 bronze badges

Comments

Antho Christen · Accepted Answer · 2017-11-22 12:03:45Z

0

Use a for..of loop:

this.count: number = 0;
for (let datum of data) {
 if(dataum.checked) count++;
}

And the markup to..

<ul> <li class="list-group-item" *ngFor="let user of data">
  <input type="checkbox" [(ngModel)]="user.checked" (ngModelChange)="changed()"/>
{{user.name}}
</li>

<p>total checked: {{count}}</p>

answered Nov 22, 2017 at 12:03

Antho Christen

1,3391 gold badge11 silver badges22 bronze badges

Collectives™ on Stack Overflow

Count how many check boxes checked in Angular 2 typescript?

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related