Angular 8 mat-radio-button checked dynamically

Question

I checked my value using the attribute [checked] of mat-radio-button .

<div class="mb-3" *ngIf="!multiple" class="ttb-filter-list">
    <mat-radio-group class="d-flex flex-column" aria-labelledby="group-radio" [(ngModel)]="radioValue">
        <mat-radio-button *ngFor="let option of filteredOptions | async" [value]="option" color="primary" [checked]="option.checked">
            {{ option.name }}
        </mat-radio-button>
    </mat-radio-group>
</div>

And as you can see the radio button with the id mat-radio-2 as ng-reflect-checked="true"

Is is not checked though.

Answer 1

EDIT : the answer from @adrita-sharma is showing how to do it correct

My first idea is that your property radioValue is not set properly to what should be checked.

If not please provide a stackblitz to reproduce

Answer 2

You do not need to set the value in checked , it should be set through ngModel

Eg:

.ts

  filteredOptions = [
    { id: 1, name: "abc" },
    { id: 2, name: "xyz" }
  ];

  radioValue = 2

.html

<mat-radio-group class="d-flex flex-column" aria-labelledby="group-radio" [(ngModel)]="radioValue">
  <mat-radio-button *ngFor="let option of filteredOptions" [value]="option.id" color="primary">
    {{ option.name }}
  </mat-radio-button>
</mat-radio-group>

Demo