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

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

ng new radioButtonExample

1	ng new radioButtonExample

Note: install nodejs and npm in your machine.

Go to the root of the app

cd radioButtonExample

1	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	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.

7,424

2 Leave a Reply

2

Leave a Reply