CODEWITHSUNDEEP
angular
Arjun Sarthi
Arjun Sarthi

Reputation: 109

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

 <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 ?

Upvotes: 0

Views: 1044

Answers (2)

user7787261
user7787261

Reputation:

use PrimeNG

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

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

Upvotes: 0

wuno
wuno

Reputation: 9875

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>

Upvotes: 1

Related Questions