<label *ngIf="label !== ''">
  {{label}}
</label>
<div
  #selection
  [attr.tabindex]="disabled ? null : 0"
  [ngClass]="{'open': isOpen, 'focus': hasFocus, 'below': isBelow, 'disabled': disabled}"
  (click)="onSelectContainerClick()"
  (focus)="onSelectContainerFocus()"
  (keydown)="onSelectContainerKeydown($event)"
  (window:click)="onWindowClick()"
  (window:resize)="onWindowResize()">

  <div class="single"
    *ngIf="!multiple">
    <div class="value"
      *ngIf="optionList.hasSelected()">
      {{optionList.selection[0].label}}
    </div>
    <div class="placeholder"
      *ngIf="!optionList.hasSelected()">
      {{placeholderView}}
    </div>
    <div class="clear"
      *ngIf="allowClear && hasSelected"
      (click)="onClearSelectionClick($event)">
      &#x2715;
    </div>
  </div>

  <div class="multiple"
      *ngIf="multiple">
      <div class="placeholder"
        *ngIf="!optionList.hasSelected()">
        {{placeholderView}}
      </div>

      <div class="option" 
        *ngFor="let option of optionList.selection">
        <span class="deselect-option">, </span>{{option.label}}
      </div>
  </div>

</div>
<mdb-select-dropdown
  *ngIf="isOpen"
  #dropdown
  [multiple]="multiple"
  [optionList]="optionList"
  [notFoundMsg]="notFoundMsg"
  [highlightColor]="highlightColor"
  [highlightTextColor]="highlightTextColor"
  [filterEnabled]="filterEnabled"
  [placeholder]="filterPlaceholder"
  [top]="top"
  [left]="left"
  (close)="onDropdownClose($event)"
  (optionClicked)="onDropdownOptionClicked($event)"
  (singleFilterClick)="onSingleFilterClick()"
  (singleFilterInput)="onSingleFilterInput($event)"
  (singleFilterKeydown)="onSingleFilterKeydown($event)">
</mdb-select-dropdown>