How to get the value of selected Checkbox in angular 2

Question

I am trying to do a simple To Do list using Angular 2. I want to know which checkbox the user has clicked. And based on the click, i want to strikeout the text. I guess we could use :checked css property. But how do I implement this only through angular.

This is what i have done till now.

HTML:

  <label *ngIf="isActivityEmpty()">No Activities to track! Start by adding one</label>
  <ol *ngIf="!isActivityEmpty()">
    <div *ngFor="let activity of activityList" >
      <input class="left" name="{{activity}}" type="checkbox" [(ngModel)]="chkbox"/>
      <li class="checked-{{chkbox}}">{{activity}}</li>
    </div>
  </ol>

Component:

export class AppComponent {

  activity: string = '';
  activityList: string[] = ['Sign up for play','Start Playing'];

  chkbox: boolean = false;

  constructor() {
  }

  addActivity(){
    this.activityList.push(this.activity);
  }

  clearActivity(){
    this.activityList.length = 0;
  }

  isActivityEmpty(){
    let empty;
    if(this.activityList.length==0)
      empty = true;
    else
      empty = false;

    return empty;
  }
}

Link to Plnkr -> https://plnkr.co/edit/iikSmd4eIwpbQDPoJFZu?p=preview

If i select any one checkbox, it selects all the checkboxes.

I am new with Angular 2, any help would be good.

Thanks.

Gowtham Raj J · Accepted Answer · 2017-08-01 08:49:30Z

1

You have assigned the same property to all the checkboxes. Here is the fixed/updated plunk to your code: https://plnkr.co/edit/E0rrwiVqzIrloTIpfKtT?p=preview

Updated component.html file:

<div>
      <header>
        Activity Tracker
      </header>

      <label *ngIf="isActivityEmpty()">No Activities to track! Start by adding one</label>
      <ol *ngIf="!isActivityEmpty()">
        <div *ngFor="let activity of activityList" >
          <input class="left" name="{{activity.title}}" type="checkbox" [(ngModel)]="activity.checked"/>
          <li class="checked-{{activity.checked}}">{{activity.title}}</li>
        </div>
      </ol>
      <br>
      <input type="text" [(ngModel)]="activity.title" placeholder="Enter activity here" required/>
      <br>
      <button (click)="addActivity()">Add an Activity!</button>
      <button (click)="clearActivity()">Clear All</button>
    </div>

Updated component.ts file:

import { Component, Input } from '@angular/core';

@Component({
  selector : 'ta-app',
  templateUrl : './src/app.component.html',
  styleUrl : './style.css'
})

export class AppComponent {

  activity: Activity = new Activity();
  activityList: Activity[] = [new Activity('Sign up for play'), new Activity('Start Playing')];

  chkbox: boolean = false;

  constructor() {
  }

  addActivity(){
    this.activityList.push(this.activity);
  }

  clearActivity(){
    this.activityList.length = 0;
  }

  isActivityEmpty(){
    let empty;
    if(this.activityList.length==0)
      empty = true;
    else
      empty = false;

    return empty;
  }

}

class Activity {
  title: string;
  checked: boolean;

  constructor(title:string){
    this.title = title;
    this.checked = false;
  }
}

edited Aug 1, 2017 at 8:49

Gowtham Raj J

96710 silver badges26 bronze badges

answered Aug 1, 2017 at 8:23

FAISAL

34.8k10 gold badges102 silver badges107 bronze badges

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

4 Comments

Gowtham Raj J Over a year ago

Thanks for answer:)

FAISAL Over a year ago

@gowthamrajj if my answer helped you, then why did you change the status ? strange :/

Gowtham Raj J Over a year ago

i wanted to mark both as answers. But it didnt allow :(

FAISAL Over a year ago

Ok no worries glad it helped

Sajeetharan · Accepted Answer · 2017-08-01 08:17:27Z

0

It's happening because you are using the same variable as ngModel, create an array with Activity object like this,

export class Activity {
  name:string,
  checked : boolean;
}

and

export class AppComponent {
  activity: Activity;
  activityList: Activity[] = [{name:'Sign up for play',checked:false},
  {name:'Start Playing',checked:false}];

DEMO

answered Aug 1, 2017 at 8:17

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

1 Comment

Gowtham Raj J Over a year ago

Thanks for the answer. I should have used an array.

Collectives™ on Stack Overflow

How to get the value of selected Checkbox in angular 2

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related