eduard
eduard

Reputation: 87

Simple dropdown component in angular 2

How to create a typescript component for simple html dropdown?

    <div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

How to implement of this?

Upvotes: 3

Views: 3747

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657496

<select [(ngModel)]="whereWeStoreTheValue">
  <ng-container *ngFor="let option of options">
    <option *ngIf="!option.isDivider" [ngValue]="option">{{option.name}}</option>
    <option *ngIf="option.isDivider" disabled>{{option.name}}</option>

  </ng-container>
</select>
class MyComponent {
  options = [
   {name: 'Action'}, 
   {name: 'Another action'},
   {name: 'Something else here'},
   {isDivider: true},
   {name: 'Separated link}
  ];
}

Upvotes: 1

Related Questions