Angular 7 Material Updating Radio Button checked dynamically

Question

I have an Angular Material app with radio buttons. I want to update the selected button based on data from a DB. It's all working except the checked button only updates when something happens on the page (e.g., a mouse click). Do I need to trigger change detection?

HTML

<mat-radio-group name="animals" (change)="saveAnimal($event)">
   <mat-radio-button *ngFor="let option of animalOptions"
            [checked]="option.checked" value="{{option.value}}">{{option.label}}
  </mat-radio-button>
</mat-radio-group>

Component.ts

public animalOptions: any = [
      {label: 'cat', value: '1', checked: true},
      {label: 'dog', value: '2', checked: false}];

Then after calling API to get data in ngOnInit:

if (this._choice.animal === 'cat') {
          this.animalOptions[0].checked = false;
          this.animalOptions[1].checked = true;
        }

@AlexanderStaroselsky nice turnaround on that StackBlitz example! Thanks for that. I'll check your suggestion — beachCode
– beachCode, Commented Nov 19, 2018 at 1:43
Sorry, here is the updated StackBlitz example. Fundamentally your code works as expected. Based on the information you provided it is very likely an issue with how the API call is being evaluated. I'd recommend to share how this._choice.animal is populated exactly by updating the key aspects of that call in your question. Most likely, you are attempting to access that value outside of a subscribe() or then() before it has resolved. — Alexander Staroselsky
– Alexander Staroselsky, Commented Nov 19, 2018 at 2:08
@AlexanderStaroselsky thanks again. I moved the code to the beginning of ngOnInit (i.e., before anything else) and it works. I'm not sure what's messing it up along the way. But you were right, so if you add your example as an answer, I'll mark it resolved. — beachCode
– beachCode, Commented Nov 19, 2018 at 6:10

Alexander Staroselsky · Accepted Answer · 2018-11-19 14:27:52Z

The code you shared to dynamically render and manipulate material radio button group values is correct. The issue is most likely in how/where this._choice.animal is being evaluated. It that value is retrieved via something like HttpClient get(), make sure to evaluate this._choice.animal inside subscribe() or then() if it's a Promise<T>:

import { Component } from '@angular/core';

@Component({
  selector: 'radio-overview-example',
  templateUrl: 'radio-overview-example.html',
  styleUrls: ['radio-overview-example.css'],
})
export class RadioOverviewExample {
  public animalOptions: any = [
    { label: 'cat', value: '1', checked: true },
    { label: 'dog', value: '2', checked: false }
  ];

  public _choice: any;

  ngOnInit() {
    this.getSomeApiValue().subscribe(result => {
      this._choice.animal = result;

      if (this._choice.animal === 'cat') {
        this.animalOptions[0].checked = false;
        this.animalOptions[1].checked = true;
      }
    });
  }
}

Here is an example in action.

Hopefully that helps!

Collectives™ on Stack Overflow

Angular 7 Material Updating Radio Button checked dynamically

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related