ng2-encrm-components/components/select/en-select.component.html

angular 2 components

<div class="en-input-group" [offClick]="clickedOutside">
  <div class="en-form-control en-select" (click)="toggleOpen()">
    <span *ngIf="selectedOption" class="en-select-current-label">{{selectedOption.label}}<span *ngIf="selectedSuboption">: <strong>{{selectedSuboption.label}}</strong></span>
    </span>
    <span *ngIf="!selectedOption"  class="en-select-current-label">{{placeholder}}</span>
    <i class="material-icons pull-xs-right" *ngIf="!active">keyboard_arrow_down</i>
    <i class="material-icons pull-xs-right" *ngIf="active">keyboard_arrow_up</i>
  </div>
  <label>{{label}}</label>
  <div class="en-select-list" *ngIf="active && options && options.length">
    <div class="en-select-list-item"
         [class.en-select-option-simple]="!o.suboptions"
         *ngFor="let o of options; let i = index;">
      <div class="en-select-list-label" (click)="selectOption(o)" *ngIf="!o.suboptions">
        {{o.label}}
      </div>
      <div class="en-select-list-label en-select-option-compound" *ngIf="o.suboptions">{{o.label}}</div>
      <div class="pull-right">
        <div *ngFor="let so of o.suboptions">
          <div class="en-btn btn-link" (click)="selectSuboption(o, so)"><strong>{{so.label}}</strong></div>
        </div>
      </div>
    </div>
  </div>
</div>