Angular 8 Checkbox Change Event Checked undefined

Question

Im trying to execute a function when a checkbox has been ticked/unticked but wasnt able to get the checkbox.checked as it is showing as undefined.

html:

<input type="checkbox" (change)="eventCheck($event)" />

typescript:

eventCheck(event){
console.log(event.checked) <--- this is undefined
}

note: I was able to get the event object but im not sure which property to check if the checkbox has been checked or not.

Can you guys help me with this? thanks!

be carefull, if you use javaScript must be evet,target.checked, if use material angular is event.checked, if use (ngModelChange) $event is true or false.tip: use console.log(event) and see what are you receiving — Eliseo
– Eliseo, Commented Aug 31, 2019 at 13:53

Vivek Doshi · Accepted Answer · 2019-08-31 13:51:36Z

24

it should be event.target try :

eventCheck(event){
    console.log(event.target.checked) <--- Check with this
}

OR Use it like :

<input type="checkbox" (change)="eventCheck($event.target)" />

answered Aug 31, 2019 at 13:51

Vivek Doshi

58.8k12 gold badges120 silver badges126 bronze badges

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

2 Comments

this works @vivek thank you! ill tag this as accepted answer after 5mins

What is the type of that event parameter? Event interface does not have target.checked field.

Mayur Parmar · Accepted Answer · 2021-01-05 05:48:46Z

3

Here Is Solution...

Chek.ts

testCheck(event){
       console.log(event.target.checked); <--- Return True/False Check/UnCheck
}

Chek.html

<input type="checkbox" name="test" (change)="testCheck($event)" />

answered Jan 5, 2021 at 5:48

Mayur Parmar

2641 silver badge8 bronze badges