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

Note: install nodejs and npm in your machine.

Go to the root of the app

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


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


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

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


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”

Add in @NgModule

It’s done!

Find full source code here on Github.

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

Leave a Reply

2 Comment threads
1 Thread replies
Most reacted comment
Hottest comment thread
2 Comment authors
Jolly.exePradeep Recent comment authors
newest oldest most voted
Notify of

Any idea on having multiple select in the same form


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