unable to set the radio button value selected on button click in list group using angular

Question

Here the requirement is I am displaying the radio button as list group in each list we have 2 buttons with click functionality and whenever the user clicks on that button, it should automatically select the radio button too. Now I am able to place button and radio button selected button I m not able to select the radio button when the respective sub button is clicked, below is code and Stackblitz

<div class="text-center mt-5">
  <h4>Selected value is {{radioSel.name}}</h4>

  <div>
    <ul class="list-group">
      <li class="list-group-item" *ngFor="let item of data">
        <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" /> {{item.name}} &nbsp;
        <span (click)="one(item.name,'A')">A</span> &nbsp;&nbsp;

        <span (click)="two(item.name,'B')">B</span>

      </li>
    </ul>
  </div>

  <h5>{{radioSelectedString}}</h5>

</div>

TS code

  radioSel:any;
  radioSelected:string;
  radioSelectedString:string;
   public data = [
    {
        name:'Item 1',
        value:'item_1'
     },
     {
         name:'Item 2',
         value:'item_2'
      },
      {
          name:'Item 3',
          value:'item_3'
       },
       {
           name:'Item 4',
           value:'item_4'
        },
        {
            name:'Item 5',
            value:'item_5'
         }
];
constructor() {

      this.radioSelected = "item_3";
      this.getSelecteditem();
     }

    getSelecteditem(){
      this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
      this.radioSelectedString = JSON.stringify(this.radioSel);
    }

    onItemChange(item){
      this.getSelecteditem();
    }
    one(data,data1,data2){
      console.log(data,data1,data2);
    }
    two(data,data1,data2){
    console.log(data,data1,data2);
    this.radioSelected = data;
    this.data.find(item => item.value === this.radioSelected);


    }

Stackblitz URL::--> https://stackblitz.com/edit/angular-e7utfs and if I click on the other external button I need to get the radio button values

Answer 1

I have tried to solve this with the following approach.

Assigned a dynamic id to each radio button id="{{ item.name }}". A method onButtonClick(item, i) is fired on every button click. Inside the method, I am setting the input element checked flag to true

HTML

<div class="text-center mt-5">
<h4>Selected value is {{radioSel.name}}</h4>

<div>
  <ul class="list-group">
        <li class="list-group-item"  *ngFor="let item of data; let i = index">
          <input type="radio" id="{{ item.name }}" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)" /> 
          {{item.name}} &nbsp;
          <button (click)="onButtonClick(item)">A</button> &nbsp;&nbsp;

          <button (click)="two(item.name,'B')">B</button>

        </li>
  </ul>
</div>

<h5>{{radioSelectedString}}</h5>

</div>

TS Code

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
   radioSel:any;
  radioSelected:string;
  radioSelectedString:string;
   public data = [
    {
        name:'Item 1',
        value:'item_1'
     },
     {
         name:'Item 2',
         value:'item_2'
      },
      {
          name:'Item 3',
          value:'item_3'
       },
       {
           name:'Item 4',
           value:'item_4'
        },
        {
            name:'Item 5',
            value:'item_5'
         }
];
constructor() {

      this.radioSelected = "item_3";
      this.getSelecteditem();
     }

    getSelecteditem(){
      this.radioSel = this.data.find(Item => Item.value === this.radioSelected);
      this.radioSelectedString = JSON.stringify(this.radioSel);
    }

    onItemChange(item){
      this.getSelecteditem();
    }
    one(data,data1){
      console.log(data,data1);
    }
    two(data,data1){
    console.log(data,data1);
    this.radioSelected = data;

    }
    onButtonClick(data) {
      const el = document.getElementById(data.name) as HTMLInputElement;
      el.checked = true;
    }
}

Answer 2

In the given code, you are setting a value with item.name when button B is clicked.

It has to be item.value instead of item.name since input tag is bound with item.value.

HTML:

<span (click)="two(item.value,'B')">B</span>

TS:

two(data, data1) {
  console.log(data, data1);
  this.radioSelected = data;
}