components: checkbox event.target.checked undefined

Bug, feature request, or proposal:

Bug

What is the expected behavior?

<md-checkbox (click)="test($event)"></md-checkbox>

test(event) {
  console.log(event.target.checked); // true | false
}

What is the current behavior?

<md-checkbox (click)="test($event)"></md-checkbox>

test(event) {
  console.log(event.target.checked); // undefined
}

Which versions of Angular, Material, OS, browsers are affected?

@angular2-material/checkbox @2.0.0-alpha.7-2 @angular/core @2.0.0-rc.5 @angular/forms @0.3.0

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 2
Comments: 17 (5 by maintainers)

Most upvoted comments

This works properly for me:

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

onChecked (e: Event) {
  const checkbox = e.target as HTMLInputElement;

  if (checkbox.checked) {
    // do something
  }
}

+13

joseluisq on Sep 11, 2018

try this: ツ

<mat-checkbox (change)="check($event)"></mat-checkbox>
check(event) {
     console.log(event.checked) // true or false
}

+11

mojtaba-ramezani on Mar 9, 2018

hello, try

<md-checkbox (click)="test($event)"></md-checkbox>

test(event) {
  console.log(event.checked); // not event.target.checked
}

gonmedtara on Oct 10, 2017

Hm, I was looking at this issue, and it looks like the target in the MouseEvent is not the underlaying input

I think this is an issue which is solvable, but would rather make the components more complex than they need.

As a workaround I propose the change event, because it will be triggered when a click was recognized on the underlaying input.

http://plnkr.co/edit/SngekMXtQR4Y2QmAnzWK?p=preview

devversion on Aug 31, 2016

<input type="checkbox" (click)="boxClicked($event)" />

public boxClicked(e: MouseEvent){
    if((<HTMLInputElement>e.srcElement).checked) {
        // Do something...
    }
}

Highspeed7 on Mar 6, 2018

The workaround with change is easy to implement in my case, so I’m not sure if this would be a problem for someone or not. Just wanted to address this missmatch on normal behaviour and difference in md-checkbox versions 😃

fedu on Aug 31, 2016

How can we get the native event? I have a situation where I want to stop propagation of my event to parent? But I am not able to get that event.

gauravsoni119 on Aug 5, 2018

It worked on the eariler version of md-checkbox and the normal <input type="checkbox" (click)="test($event)"> works, so shouldn’t the behaviour be the same?

fedu on Aug 31, 2016