Join egghead, unlock knowledge.

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
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Build Select Dropdowns for Angular 2 Forms

    2 - 6

    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.



    Become a Member to view code

    You must be a Pro 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
    orLog In




    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.