Angular 9|8|7 Dynamic Radio List get Selected Value

Listing of items in data is a simple way to show items. If users have to select only a single Item out of it, we need to use radio input fields. here we will discuss the implementation of radio input list in Angular 6. We will develop a simple Angular application which will have the following tasks:

1) Create a new Angular Application.
2) item.ts having item model definition.
3) mock-data.ts, will have a list of items.
4) use ngModel to have data binding flowing both sides.
5) Change event binding to get Checked item record.

See the app working here



Also Check: Angular 8/7 | Radio Value Selection and Getting Updated Object in *ngFor Listing Example



Step 1) Create a new Angular Application using below CLI command

ng new radioButtonExample

Note: install nodejs and npm in your machine.

Go to the root of the app

cd radioButtonExample

Step 2) Create item.ts file, which will have a model definition of the item we will show in radio listing.

export class Item{


Step 3) Create mock-data.ts to list items which we will iterate.

import { Item } from './item';

export const ITEMS: Item[] = [
        name:'Item 1',
         name:'Item 2',
          name:'Item 3',
           name:'Item 4',
            name:'Item 5',


Step 4) Open app.component.html and replace HTML with below content.

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

  <ul class="list-group">
        <li class="list-group-item"  *ngFor="let item of itemsList">
          <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)"/> 



Note: I have added bootstrap.css v4 in index.html at the root for easy styling and also some styles in app.component.css.

Step 5) In app.compomponent.ts replace the code with below content

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

import {Item} from '../app/item';
import {ITEMS} from '../app/mock-data';

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'app';
  itemsList: Item[] = ITEMS;

    constructor() {
      this.itemsList = ITEMS;
      this.radioSelected = "item_3";

      this.radioSel = ITEMS.find(Item => Item.value === this.radioSelected);
      this.radioSelectedString = JSON.stringify(this.radioSel);




Here we have “onItemChange” even which will fire on radio selection/change.
getSelecteditem” will find the matching item from dataset ITEMS.
radioSelected” is setting default selection to “item 3”, which will show up selected on app load.

In app.module.ts import “FormsModule

import { FormsModule } from '@angular/forms';

Add in @NgModule

  declarations: [
  imports: [
  providers: [],
  bootstrap: [AppComponent]

It’s done!

Find full source code here on Github.

Notify of
Oldest Most Voted
Inline Feedbacks
View all comments

I have a list and every item of the list have for radio buttons first radio of each item is checked by default But when I select another radio each selected radio of every item change.

[…] Radio dinámico listado de ejemplo aquí [ ENGLISH:
Dynamic radius example listing here ] […]

Any idea on having multiple select in the same form