How to get the value of the selected HTML radio button with Angular - Kevin Chisholm Video

In this video, I’ll explain how to get the value of the selected radio button with Angular.

The demo code gets its dependencies from UMD, using system loader:

Here are a few links that might be helpful for this video:

When working with Angular, you may find that you need to act upon the choice that a user makes with a set of radio buttons. So here I’ve got a set of radio buttons, and when the user selects one of the radio buttons, I’ve showed the result in the page.

So bottom line is that whenever the user makes a selection here, I’m acting upon the value of the selection they’ve made. If I choose Monday, I see Monday, and Tuesday, and so forth.

Let’s take a look at how this all works. So here we have the code that produces the exact page that you just saw. Now I’m using an ngFor, which is used to iterate over an array. So I’m saying let day of days. Well what is days? Well days in our component file is an array and this array is the five days of the work week.

So just know that in our template, we’re saying hey, for every day in the days array, for every day in that work week, we’re going to do this. This div is going to happen five times. And each time it happens, we’re going to get a different day and we’re going to produce a radio button.

So that’s just an easy way of creating five radio buttons, as opposed to creating five, literally five input elements type of radio in the markup. We just create one, and use ngFor to loop through it.

Now for each radio button we’re looking at the change event and we’re saying, hey, when the change happens on this radio button, we want to call the radio change handler. That’s an event handler. And we’re passing it an event object.

So just know that when one of these radio buttons changes, this radio change handler method is called and passed to the event object. Then down here on the page, this selected day property is going to be updated, and the selected day property is what you see when the user makes a change here. This is the selected day property. This is what’s being updated.

So let’s take a look at our components and see how this all comes together. So in the component file, we know that we have our days array, which produces the five days of the work week.

But here we have our radio change handler, and that’s the event handler that gets executed when the user makes a selection, or changes one of the radio buttons. And it receives an event object. An event object is an object that’s provided by the browser, whenever an event handler is executed.

So, let’s drill down and inspect and act upon different properties of the event. In this case, the event will have a target. The target is the element that was acted upon. So the target is going to be the radio button that was changed. And the value is the value of that radio button. For example, Monday, Tuesday, Wednesday, Thursday, and Friday.

So we’re saying that this .selectedDay = that value. While selectedDay is a property on our component, and that’s what we were looking at just a few moments ago, here. We were saying that selectedDay is the property provided in a template that allows us to see in the web page the change that is made.

So back in the component, we just know that when the event handler fires, it receives an event object, it looks at its target property, and then the value of the target property, for example, Monday, Tuesday, Wednesday, Thursday, Friday, and it assigns it to this .selectedDay. We have to say this .selectedDay because we’re inside of a method here, but this .selectedDay is the selectedDay property.

So all that winds up coming together here in the template, in that we create five radio buttons, and then for each radio button whenever one of them changes, we call this event handler, we pass it the event object, and then our component acts upon that event object, takes a look at its target, and the target’s value, and assigns it to this. selectedDay. selectedDay is a property in our component, and then back in the template, we see the update to selectedDay.

And then in the browser, what happens is, whenever we make a selection, the value of that selection is shown in the web page, whether it’s Monday, Tuesday, Wednesday, and so forth.

If you found this video helpful, you can subscribe to my channel by clicking the red "Subscribe" button right under the video. You can also take a look at my blog, where there are many articles and tutorials about web development.

Thanks very much for watching.

[aryanyt]

Awesome, can't find it anywhere, found it here at last

[adarshshukla]

Simple, easy and aptly to the point. Keep up the good work buddy. Really helped me after hours of searching over stackoverflow. Saved my day!

[sharonsegal]

I've been searching for hours for this solution, thank you!

[davidchavez]

You are a professional, thank you for helping me.

[claudeallard]

That is a wonderful explanation and example. Thanks for creating that.

[minalhatwar]

Hey can you please share how do we set a default value as one of the radio buttons
Thanks

[heba_Ibrahem]

this is great I've been searching all the day for this
but i got a problem whenever i try to select input it select all of them with one click in case i bind it with from control name to use in reactive form and when i remove it, it still select all of them but with multi clicks
so can you help me
thanks in advance

[NewGroundBreaker]

Great video! It really helped me. Keep up the good work

[diraneserges]

Great tutorial but How i can do to select multiple day for expample monday and friday und display it

[mahalaxmisadula]

Thanks Kevin. Could you please make a video on dynamic radio buttons with attributes like aria-label, tabindex and explain it's working?

[benayedmarwa]

I tried that but I'm getting this error on my browser console :" ERROR TypeError: event.target.value is not a function".

[alangarduno]

I tried it and it worked but, now the problems is that I cant select any radio button, Somebody knows why? or if I have to add somethig because I am working with an array of objects

[vishaljangra]

I tried the same but initially nothing appears.

[rizkymahendra]

Would u make tutorial for it? I mean like step by step