Components: checkbox event.target.checked undefined

[fedu]

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/[email protected]
@angular/[email protected]
@angular/[email protected]

[devversion]

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

[fedu]

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?

[devversion]

Definitely, the goal is to make the components as much as consistent to the native ones.

It's just a bit more difficult to forward all click events to the underlaying input, because click events can also happen on the label or other container elements inside of the component.

Waiting for @jelbourn's opinion on this.

[fedu]

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 :)

[jelbourn]

@tinayuangao we might need to think a bit about our approach here

[leocaseiro]

I was having the same issue and using (change) instead of (click) works.

I'll leave my plunkr here: http://plnkr.co/edit/QW2UqY6huRtZVqwfmlbU?p=preview

@Component({
  selector: 'demo-component',
  template: `
Value: {{isChecked}} <br><br>
Native: <input type="checkbox" (click)="doCheck($event)" [checked]="isChecked" /> <br><br>
Click: <md-checkbox (click)="doCheck($event)" [checked]="isChecked"></md-checkbox> <br><br>
Change: <md-checkbox (change)="doCheck($event)" [checked]="isChecked"></md-checkbox>
`
})
export class DemoComponent {

    isChecked:boolean = false;

    doCheck($event) {
        this.isChecked = !this.isChecked;
    }
}

[dblock247]

try this

<input type="checkbox" (change)="selectionChange($event.srcElement)">

selectionChange(input: HTMLInputElement) { input.checked === true ? doSomethingIfTrue() : doSomethingIfFalse(); }

sorry I couldn't get the code formatted correctly.

[gonmedtara]

hello,
try

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

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

[waqasdilawar]

Anglar Material-v5 Checkbox provides "MatCheckboxChange" and "checked" properties, using $event (as I did in console.log(event...) ) so when you drill down MatCheckboxChange it will show "source" which is I think equal to "target" which you want to access. So you can access value "event.source.value" and checked can be accessed directly using event.checked.
"html"
<mat-checkbox [(ngModel)]="selected" [value]="id"(change)="updateChecked($event)"></mat-checkbox>

"ts"
updateChecked(event) { console.log(event, ' ', event.checked,' ', event.source.value); }

[jelbourn]

Closing this since there's a way to get the value presently

[Highspeed7]

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

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

[mojtaba-ramezani]

try this: ツ

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

[hellosandeep]

Hi,
you can get checked status true/false using below code.
HTML

TS
doCheck(event){
if( event.checked){
console.log('Checked Value Is True');
}else{
console.log('Checked Value Is False');
}
}

[gauravsoni119]

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.

[joseluisq]

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
  }
}

[seun035]

Casting to HTMLInputElement works

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}