I am currently working on an Angular Material application that includes radio buttons. My goal is to update the selected button based on data retrieved from a database. While everything seems to be functioning properly, I have noticed that the checked button only updates when there is an interaction with the page, such as a mouse click. Is it necessary for me to trigger change detection in this scenario?
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}];
Subsequently, after retrieving the data from the API in the ngOnInit method:
if (this._choice.animal === 'cat') {
this.animalOptions[0].checked = false;
this.animalOptions[1].checked = true;
}