Build Select Dropdowns for Angular 2 Forms
Share this video with your friends
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.
I'm going to reuse these locations and convert the radio buttons or just delete the radio buttons and create a select dropdown.
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.
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.
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.
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.
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.