question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 <md-checkbox> 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 <md-checkbox> 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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:8 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
hags033commented, Sep 12, 2017

Figured it out.

0reactions
angular-automatic-lock-bot[bot]commented, Sep 7, 2019

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

md-checkbox not triggering change event when inside *ngFor ...
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...
Read more >
change event function in *ngfor for checkbox - angular
The error self.parentView.context.checkChange is not a function means there's no function called checkChange inside your component.
Read more >
mat-checkbox, Angular material checkbox component Usage ...
Now we will bind the data to angular material checkbox. ... But if you set the checked value dynamically change event will not...
Read more >
My breakpoint in Angular's change detection is not triggered ...
Coding example for the question My breakpoint in Angular's change detection is not triggered on checkAndUpdateView()-angular.js.
Read more >
angular/angular - Gitter
I decided to not use system.js, and replaced it with webpack :) pantonis ... I am submitting data from angular to backend like...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found