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.

Can't select item in md-radio-group with *ngFor and changing content

See original GitHub issue

Bug, feature request, or proposal:

Bug 😃

What is the expected behavior?

Even if the list of items in the *ngFor are updated (e.g. cloned), clicking on an md-radio-button should still make it “selected”

What is the current behavior?

If I provide some list of items to an *ngFor, but the items are different instances on each angular tick, I should still be able to select the associated md-radio-buttons for those items. For example:

// ...
get fish() {
  return [
    {name: 'Bob'},
    {name: 'Amir'},
    {name: 'Toyin'}
  ]
}
// ...
-----
<md-radio-button *ngFor="let f of fish" [value]="f.name">{{f.name}}</md-radio-button>

With the current behaviour, I can’t select any of the items in this list of fish 😃

What are the steps to reproduce?

http://plnkr.co/edit/0sX0rzMZdOHyP7NSLPkk?p=info

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

In cases where such a list is queried from an external source (like a server), it would be a shame if the “currently-selected item state” was lost - even if the data was identical! - because the data is now different “instances”

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

Angular 4, Chrome 62

Is there anything else we should know?

Thanks for the useful, stylish components!

This may be mildly similar to #1862

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
mitchhentgescommented, Nov 2, 2017

Talked to my buddy @hneiva, I can use trackBy in *ngFor to avoid the digest recreating the DOM elements. I’ve made a new plunker to show the working solution, but plunker is currently error-ing out, so I can’t be sure that it’s actually running correctly.

Thanks Jeremy for the assistance, hopefully this is enough explanation to clear up any confusion 😃

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

Having trouble properly binding radio buttons within *ngFor
I've successfully been able to bind the buttons to the model. However, it behaves very oddly when I select a new option. The...
Read more >
Radio button | Angular Material
The currently selected radio button. If set to a new radio button, the radio group value will be updated to match the new...
Read more >
ion-select: Select One or Multiple Value Boxes or Placeholders
ion-select is represented by selected value(s), or a placeholder, and dropdown icon. When you tap select, a dialog box appears with an easy...
Read more >
Structural Directives | AngularDart Community Documentation
Another problem: some HTML elements require all immediate children to be of a specific type. For example, the <select> element requires <option> children....
Read more >
Angular 12 Dynamic Radio List Example - Get Selected Value ...
Listing of items in Angular is done using *ngFor directive which is used ... Get updated object of user access with changes radio...
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