How to get the value of an HTML dropdown with Angular - Kevin Chisholm Video
https://blog.kevinchisholm.com
In this video, I’ll explain how to get the value of the selected drop down with Angular.
When working with Angular, you may find that at times you need to act upon the selection a user makes from a drop down box. Technically a drop down box is what’s called a select element.
And here in this page I’ve got a select element, otherwise known as a drop down box, with the five days of the work week. So, when I select one of the days, the result of that selection is shown in the page.
If I choose Monday I see Monday, if I choose Tuesday I see Tuesday, and so forth. So, the main thing to keep in mind here is that whatever the user selects, we’re acting upon that value. In this case we’re showing it in the page, but we may want to do something more sophisticated.
Let’s take a look at the code and see how this all works. So here we have the markup for the exact page that we just looked at. And the select element is the drop down box that you see.
Now when the user makes a selection, they are choosing one of these option elements. And each time they choose an option element, the change event fires on the select element. When the change event fires, we’re executing the select change handler method on our component, and passing it the event object.
We’ll revisit this in just a minute. Down here, we’re showing the value of the selected day property. So we just know that on our component there’s a property called selected day, and when you saw me making a change here in the drop down box, right here, the selected day property is what’s being updated here in that page.
So let’s look at our component. So here in the component, we have this selected day property and it’s a string, so that’s the property that we’re updating whenever we make a change to the drop down box.
Here we have the select change handler method, and that method takes an event object as its sole argument. An event object is something that the browser provides to an event handler, which allows you to drill down, act upon different parts of the event.
But just know that when we get this event object, it has a target property. The target property is the element upon which the user acted, so in this case it’s the select element, and the value is the value that’s produced by that other value of that element.
So in this case, when the user makes change to the select element, whatever option they chose, that’s the value. If they chose Monday, the value’s Monday. If they chose Tuesday, the value is Tuesday, and so forth.
So we’re setting that to this .selectedday, and this .selectedday is the selectedday property. We just have to refer to it as this .selectedday, because we’re inside of an event handler. But the main thing to know is that when this event handler executes, it takes a look at this even object, it takes a look at its target property, and then it takes a look at that target property’s value property and assigns it to the selected day property of this component.
And what that all translates to is that any time the user makes a change here, the change event fires, our event handler is executed, and its passed the event object, and whichever option they chose, the value that they chose will wind up being the target value property and that’s passed to selected day. Selected day is down here, so what happens is we see the result of the user’s action here in the page.
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.