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.