<span *ngIf="hasOrderOptions()">
  <div matRipple [matRippleDisabled]="true" [matMenuTriggerFor]="menu" class="ordering-menu-button">
    <span>{{activeOrdering.display}}</span>
    <mat-icon>
      {{OrderingHelper.isDescending(activeOrdering) ? 'expand_more' : 'expand_less'}}
    </mat-icon>
  </div>
  <mat-menu #menu="matMenu" xPosition="before" yPosition="below">
    <button (click)="changeActiveOrdering(orderOption)"
            *ngFor="let orderOption of orderOptions" mat-menu-item
            class="ordering-menu-items">
      <span class="vertical-align-middle">{{orderOption.display}}</span>
      <button class="vertical-align-middle" *ngIf="activeOrdering.field === orderOption.field" disabled mat-icon-button matSuffix>
        <mat-icon>
          {{OrderingHelper.isDescending(activeOrdering) ? 'expand_more' : 'expand_less'}}
        </mat-icon>
      </button>
    </button>
  </mat-menu>
</span>
