Reputation: 87
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
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