Build Select Dropdowns for Angular 2 Forms
Select Dropdowns in Angular 2 a built with select and option elements. You use *ngFor to loop through your values and create options and use ngModel to keep track of the value as it changes.
[00:00] I'm going to reuse these locations and convert the radio buttons or just delete the radio buttons and create a select dropdown.
[00:07] So a select requires a name. That'll be the name in our model, and it requires the ng model so that it gets registered to our form, and then the select needs some options.
[00:19] We'll go ahead and create an option, and we'll loop through these with ngFor select location of locations. Each value on this is going to be the current location.
[00:31] Remember, if I did this, that would just be the string location, but since you put the square brackets around it, it evaluates whatever location is.
[00:40] Then inside of the option tag, we'll just do the classic evaluation of location to render that out inside of the option tag. Just to format this a little bit here, so now when I hit save, [inaudible] a dropdown with home away space ocean.
[00:55] When I select one, you can see that the value changes, and just like before, if I want to change the default, you just say ngModel is locations zero, hit save, and now it defaults to home, and I can change that to whatever I want.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!