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.

Leave a Reply

3 Comment threads
2 Thread replies
Most reacted comment
Hottest comment thread
3 Comment authors
aliJolly.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 ] […]


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.