Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Build Select Dropdowns for Angular 2 Forms

    John LindquistJohn Lindquist

    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.

    angularAngular
    2 - 6
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    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.

    Discuss

    Discuss