Angular logo -routing

Learn how to determine which radio button the user selected in your Angular template, and get its value.

Radio buttons provide a way to give your visitors mutually exclusive choices. In a pure HTML-based form, there is virtually no work to do; the browser takes care of all the heavy-lifting. But with Angular, you need to do a little bit of the work. The key is to examine the event object. It contains information about the user’s action.

Now the reason that we care about the event object is that the select element contains one or more children. So we’re going to attach a handler to the (change) event of the select element. But, even though a change event fired on the select element, we’re concerned with more than just the fact that there was a change; we want to know which one of the option elements was selected. So to do this, we need to take a look at the event object that is passed to the handler which is assigned to the change event of the select element. And when we do look at that event object, we want to examine the event target, and get its value. Take, for instance: “event.target.value”, in Example #1.

Example # 1

In Example # 1, we have the contents of our component. There is a selectedDay property, which will be used to display the value of the selected radio button. There is also a days property. The days property is an array, which contains the five days of the work week. This array will be used in our template so that we don’t have have to actually create five radio buttons. We will use the ngFor directive to loop over the elements of this array. For each element in the array (i.e. for each “day of days”), we create a radio button.

We’ve leveraged the ngFor directive to create the radio buttons programmatically. And in Example # 2, you’ll see that we assign the radioChangeHandler method to the (click) attribute of each of the radio button elements in the template.

Example # 2

In Example # 2, we have our Angular template. Instead of manually writing out five radio buttons, we leverage theAngular ngFor directive. In this directive, we loop over the days array that was defined in our component (see Example # 1). In our ngFor directive, we provide the value: “let day of days“. This means that for each iteration of the loop, the element being referenced will be known as day. Each, time, we use that reference to create the radio button.

Each radio button has a change attribute. We assign that change attribute to the radioChangeHandler method, passing it the $event object. In our radioChangeHandler method (see Example # 1), we take a look at the event object. That is, we want to know about its event.target.value property. We set the value of that property to the selectedDay property of our component (in the radioChangeHandler method, we refer to it as this.selectedDay). But setting the selectedDay property of our component, the UI is updated with whatever value as assign to that property.

Video Example Code

If you want to download the example code, visit this Github page, and then follow the instructions: bit.ly/kcv-angular-radio-get-value

Summary

So here, we’ve found that getting the value of the selected Radio Button with Angular requires that an event handler be set for the (change) attribute of each element. We then see that we have to inspect the event object that is passed to the change event handler. Then, by referencing the value property of the event target, we can determine which radio button was clicked by the user. Now even though this workflow requires the use of vanilla JavaScript, which is a bit more effort than is usually the case with Angular, it’s worth it so we can make that determination about which Radio Button was clicked.