Components: md-checkbox not triggering change event when inside *ngFor loop with async data

[paramsingh88]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

md-checkbox should trigger the change event

What is the current behavior?

What are the steps to reproduce?

I'm creating an angular 2 app with redux. I'm stuck with a very bizarre problem that whenever I use static array to iterate over using *ngFor in my component and rendering in it. They work fine as expected.
But the problem arises when I use observable input in my component and use it in ngFor loop using async pipe as

<li *ngFor="let s of (suggestionsData | async); let i = index;" [ngClass]="{selected: (selectedItemIndex === i)}">
    <md-checkbox [checked]="findIfSelected(s)" (change)="chooseSuggestion($event, i)" class="chkbox">{{config ? s[config.text] : s}}</md-checkbox>
</li>

It gets so annoying that I can't click the rendered inside the li's. The ones outside work fine with static data. Why is it happening I'm really disturbed??

Here's how I'm inputting the suggestionsData param in my component

export class MultiSelectComponent implements OnInit {
    @Input() labelText: string;
    @Input('suggestionsData') suggestionsData: Observable<any>;
    @Input('selectedItems')  selectedItems: Observable<any>;

and this is how I'm extracting it out from the state in another component.
@select(state => state.brand.toJS().brandInfo.brandUsers) brandUsers: Observable<any>;

and passing it in the component as
<app-multi-select labelText="Assigned To" [suggestionsData]="brandUsers" [config]="{text: 'name'}"></app-multi-select>

Please help.

[tinayuangao]

@paramsingh88 I can't reproduce this bug. Could you please make a plunker?
The async data works well to me.

[vidhema]

I have the same issue

In View HTML -
{{dataValue}}

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';

[joejordanbrown]

@vivek-vidhema You are attaching events using jQuery, which is not advised. You should stay away from using jQuery in your components. Use Angular (change), see example here.

[hags033]

I am also having the same issue when using *ngFor. <md-checkbox _ngcontent-c17="" class="mat-checkbox mat-accent mat-checkbox-checked ng-untouched ng-pristine ng-valid" ng-reflect-name="6897" ng-reflect-checked="false">...</md-checkbox> When I re-render the form after a save, the ng-reflect-checked updates to false but the class mat-checkbox-checked is still present, which still makes the checkbox appear checked.

[joejordanbrown]

@hags033 provide an example showing the problem,

[hags033]

Figured it out.

[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._}