Simple dropdown component in angular 2

Question

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?

Günter Zöchbauer · Accepted Answer · 2016-12-12 13:18:58Z

1

<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}
  ];
}

answered Dec 12, 2016 at 13:18

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

2 Comments

eduard Over a year ago

Thanks, it works, and how implement like dropdown button?

Günter Zöchbauer Over a year ago

Sorry, don't know what "like dropdown button" means. You can have a look at the components provided by github.com/ng-bootstrap/ng-bootstrap or github.com/angular/material2/blob/master/src/lib/menu/README.md

Collectives™ on Stack Overflow

Simple dropdown component in angular 2

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related