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.

Starting a Blog? Find Cheap and Best Hosting Offers

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.

20,173

Thanks for visiting :) Let me know if you have some suggestions or feedback for this post in the comment section. Looking for any tutorial or demo on FreakyJolly, just drop me a message here

3

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 […]

3 Leave a Reply

3

Leave a Reply