How can I use Angular to determine if a given value matches the value of a specific radio button in my application?

Question

I have a list of Arrays. such.

I show this in ratio buttons. like this

I want to click the check box similar to this value in the data loaded from my other array

How to resolve this?

[(ngModel)]=" " , value="" ,[checked]="true",

I tried these 3.

But it didn't go well.

Answer 1

Here is a similar app that works. Compare with your code. I used [checked] attribute.

import 'zone.js/dist/zone';
import { Component } from '@angular/core';
import { CommonModule } from '@angular/common';
import { bootstrapApplication } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div *ngFor="let payMode of payModes">
      <input type="radio" name="pm" [value]="payMode.id" [checked]="selectedPayMode === payMode.id" />
      {{ payMode.name }}
    </div>
  `,
})
export class App {
  payModes = [
    {
      id: 1,
      name: 'Monthly'
    },
    {
      id: 2,
      name: 'Quarterly'
    },
    {
      id: 3,
      name: 'Yearly'
    }
  ];
  selectedPayMode = 2;
}

bootstrapApplication(App);