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{
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'
}
];
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>
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();
}
}
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
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule
],
providers: [],
bootstrap: [AppComponent]
})
It’s done!
Find full source code here on Github.
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 ] freakyjolly.com/how-to-show-radio-input-listing-in-angular-6 […]
Any idea on having multiple select in the same form