Accessing a checkbox value on click in angular 2

Question

I have this checkbox which i want to see if it checked through ngModel binding.
When i call console.log(activeCheckbox); i can see the ngmodel and its value property set to true in the console.
But when i call console.log(activeCheckbox.value); right after or seperately, the value is undefined?

Does anybody know what is happening here ?

<input #activeCheckbox="ngModel" (click)="checkIfActive(activeCheckbox)"
    [disabled]="pageStatus==4" [ngModel]="premiumContententPackage.active"    
    name="premiumContententPackageActive" id="premiumContententPackageActive" 
    type="checkbox" >

checkIfActive(activeCheckbox){
   console.log(activeCheckbox);
   console.log(activeCheckbox.value);
}

Vamsi · Accepted Answer · 2021-04-12 18:49:13Z

23

You can listen to input change event and get the state, or event assign it to any variable

<input type="checkbox" [checked]="isChecked" (change)="changed($event)"/>


changed(evt) {
    this.isChecked = evt.target.checked;
    alert(evt.target.checked)
  }

https://plnkr.co/edit/rSxR6f88NHMBKoqDtw08?p=preview

EDIT: The reason your code cannot see the change is because click and change events are different - click event will get called before the input changed. See https://plnkr.co/edit/rSxR6f88NHMBKoqDtw08?p=preview

edited Apr 12, 2021 at 18:49

answered Oct 5, 2017 at 12:00

Vamsi

9,8006 gold badges40 silver badges46 bronze badges

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

2 Comments

Vamsi Over a year ago

click and change events are different, click event will get called before the input changed plnkr.co/edit/rSxR6f88NHMBKoqDtw08?p=preview

fascynacja Over a year ago

I am getting an error for this implementation: "TS2339: Property 'checked' does not exist on type 'EventTarget'."

fascynacja · Accepted Answer · 2024-11-11 14:10:23Z

0

Small change which made the previous answer work for me, was casting the evt.target to HTMLInputElement:

changed(evt){
    this.isChecked  = (<HTMLInputElement>evt.target).checked    
    alert(evt.target.checked)
}

answered Nov 11, 2024 at 14:10

fascynacja

3,1865 gold badges32 silver badges58 bronze badges

Collectives™ on Stack Overflow

Accessing a checkbox value on click in angular 2

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related