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

Published: 05 February 2018
on channel: Kevin Chisholm

40,288

314

https://blog.kevinchisholm.com
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:

https://github.com/kevinchisholm/vide...

Angular comes from here: https://www.npmjs.com/package/@angula...

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

https://gist.github.com/kevinchisholm...

https://github.com/kevinchisholm/vide...

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.