Angular 7/6 | How to Show Radio Input Listing |

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

1 2	ng new radioButtonExample

Note: install nodejs and npm in your machine.

Go to the root of the app

cd radioButtonExample

1 2	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{
    name:string;
    value:string;
}

export class Item{

name:string;

value:string;

}

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

import { Item } from './item';

export const ITEMS: Item[] = [
    {
        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'
         }
];

import { Item } from './item';

export const ITEMS: Item[] = [

{

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'

}

];

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

<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 itemsList">
          <input type="radio" [(ngModel)]="radioSelected" name="list_name" value="{{item.value}}" (change)="onItemChange(item)"/> 
          {{item.name}}
          
        </li>
  </ul>
</div>

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

</div>

<h4>Selected value is {{radioSel.name}}</h4>

<div>

</li>

</ul>

</div>

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

</div>

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';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
  radioSel:any;
  radioSelected:string;
  radioSelectedString:string;
  itemsList: Item[] = ITEMS;

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

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

    onItemChange(item){
      this.getSelecteditem();
    }

}

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

import {Item} from '../app/item';

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

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css']

})

export class AppComponent {

title = 'app';

radioSel:any;

radioSelected:string;

radioSelectedString:string;

itemsList: Item[] = ITEMS;

constructor() {

this.itemsList = ITEMS;

this.radioSelected = "item_3";

this.getSelecteditem();

}

getSelecteditem(){

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

this.radioSelectedString = JSON.stringify(this.radioSel);

}

onItemChange(item){

this.getSelecteditem();

}

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';

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

Add in @NgModule

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule

providers: [],

bootstrap: [AppComponent]

})

It’s done!

Find full source code here on Github.

30,947

5

Leave a Reply

newest oldest most voted

Guest

Pradeep

Any idea on having multiple select in the same form

Author

Jolly.exe

Hi Pradeep, you can check and go through this approach, hope will help

angular - Angular2 - Botón De Radio De La Unión

[…] Radio dinámico listado de ejemplo aquí [ ENGLISH:
Dynamic radius example listing here ] freakyjolly.com/how-to-show-radio-input-listing-in-angular-6 […]

ali

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 button works on name grouping… the name attribute of radio group on the same item should be the same as [rname1,rname2,rname3,rname4] different from in list items which can have name attributes like [lname1,lname2,lname3….] so on…

5 Leave a Reply

5

Leave a Reply