How to Show Radio Input Listing in Angular 6

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

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

Your email address will not be published. Required fields are marked *