How to build a select value dropdown value in Angular 2?

Question

 <li class="dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Select fruit <span class="caret"></span></a>
    <ul class="dropdown-menu">
        <li *ngFor="let fruit of Vegetables.Fruits">
            <a href="#">{{fruit.Name}}</a>
        </li>
    </ul>
</li>

With above bootstrap component, when I select a value from the dropdown, it should show the selected value in that dropdown. Can someone help me out with this Problem ?

What about <select ...><option ...></option><option ...></option></select>? — Günter Zöchbauer
– Günter Zöchbauer, Commented Apr 4, 2017 at 7:13
Is it possible to achieve for the above code ? . Because I am using bootstrap and I want to achieve the above thing with bootstrap components :) — Arjun Sarthi
– Arjun Sarthi, Commented Apr 4, 2017 at 7:15

wuno · Accepted Answer · 2017-04-04 07:52:58Z

1

Here is a working example of select box. Data is created in component.ts file then looped through in the html file.

So try this, Use my code to give you an example. Paste this in your component.ts file

cardTypes = ['American Express', 'Discover', 'Master Card', 'Visa'];

Then go to your HTML file and paste this in,

<div class="form-group col-sm-12 col-md-4">
   label for="state_address">Cards</label>
        <div class="input-group">
            <span class="input-group-addon"><i class="fa fa-street-view"></i>
             </span>
  <select class="form-control" id="cardTypes"formControlName="cardTypes">
    <option *ngFor="let cardType of cardTypes">{{cardType}}</option>
    </select>
    </div>
    </div>

answered Apr 4, 2017 at 7:52

wuno

9,90521 gold badges106 silver badges183 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

wuno Over a year ago

No problem. Try and read through it so that it makes sense. You will need it a lot! :)

user7787261 · Accepted Answer · 2017-04-04 09:20:42Z

0

use PrimeNG

https://www.primefaces.org/primeng/#/dropdown

it has many elements in easy-to-use manner with very less coding

answered Apr 4, 2017 at 9:20

user7787261

1 Comment

Arjun Sarthi Over a year ago

I will check and get back @EffinDJ

Collectives™ on Stack Overflow

How to build a select value dropdown value in Angular 2?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related