Components: MdCheckbox does not pass a change event to change handler

[mark-langer]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

The component should return a change event like any regular HTML input element does, too. Interestingly, MdInput does return a regular change event.

What is the current behavior?

When binding an event handler via the (change)="doSomethingOnChange($event)" notation, the MdCheckbox component does not return a DOM change event when checked/unchecked but a custom angular event, which does not bubble like a change event should.

What are the steps to reproduce?

Simply register a change event handler on an <md-checkbox> and log the event.

http://plnkr.co/edit/4KRXLDmbHU2pO7RvBiaw?p=preview

What is the use-case or motivation for changing an existing behavior?

The event should bubble just like a regular HTML checkbox's events bubble so that container elements can catch their events.

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

I tried both 2.0.2 and 2.3.0

Is there anything else we should know?

A fix would be fantastic. We all appreciate your team's great work!

[jelbourn]

We should make sure we're doing consistent change events across all components.

[crisbeto]

@jelbourn at least on components that wrap native ones (e.g. checkbox and radio) we could replace the stopPropagation calls with attaching our custom event data to the object. E.g. this seems to work:

(event as any).mdChangeEvent = this._createChangeEvent();

I'm not sure how we'd handle it on elements that don't have a native equivalent, though.

[devversion]

I would rather just let the change event from the underlying input elements bubble up.

Everything inside of our custom events should be still accessible from the native DOM event.

We added the custom event objects because previously those emitted just booleans. See Pull Request https://github.com/angular/material2/pull/554

[crisbeto]

I agree that the native DOM event is better, but it might not be consistent across all components. E.g. the checkbox one bubbles because it's native, however something like select won't bubble since it doesn't have a native element beneath.

[jelbourn]

Need to have a boarder conversation about this behavior.

[zualexander]

are there any news about this issue?
or is there a possible workaround for it to call stopPropagation otherwise?

[vidhema]

I have the same issue

In View HTML -
<span *ngFor="let dataValue of detailData" > <md-checkbox class="toggle-vis" [attr.data-column]="dataValue" [checked]="true">{{dataValue}}</md-checkbox> </span>

In Component -

$('md-checkbox.toggle-vis').on( 'click', function (e) { console.log('here'); });

Above is working fine but
$('md-checkbox.toggle-vis').on( 'change', function (e) { console.log(this.checked); });

is not working.
One bad solution is -
$('.mat-checkbox-input').change(function (e) { console.log('here - ' + this.checked); });

[vidhema]

Here is nice solution via jquery -

`$('md-checkbox.toggle-vis').on( 'click', function (e) {

    console.log($(this).find('.mat-checkbox-input').is(":checked"));

});`

just install jquery with npm and put below line in component -
`import * as jQuery from 'jquery';

[balazsnemeth]

any news, we would really need to handle stopPropagation

[luminousPearl]

I used both click and change event on mat-checkbox, click for passing the event to stop propagation.
The below code worked for me.