opt-cc/static/src/app/ranks/rank-list/rank-list.component.html

<div class="select-list">
  <div class="list-header">
    <mat-button-toggle-group #group="matButtonToggleGroup">
      <mat-button-toggle value="BLUFOR" (change)="filterRanks(group)">
        {{fraction.BLUFOR}}
      </mat-button-toggle>
      <mat-button-toggle value="OPFOR" (change)="filterRanks(group)">
        {{fraction.OPFOR}}
      </mat-button-toggle>
    </mat-button-toggle-group>
    <a class="pull-right btn btn-success" (click)="openNewRankForm()">+</a>
  </div>

  <div class="input-group list-header">
    <input id="search-tasks"
           type="text" #query class="form-control"
           (keyup.enter)="filterRanks()"
           [formControl]="searchTerm">
    <span class="input-group-btn">
      <button class="btn btn-default" type="button"
              (click)="filterRanks()">
        Suchen
      </button>
    </span>
  </div>

  <div>
    <pjm-rank-item *ngFor="let rank of ranks$ | async"
                   [rank]="rank"
                   (rankDelete)="deleteRank(rank)"
                   (rankSelected)="selectRank($event)"
                   [selected]="rank._id == selectedRankId">
    </pjm-rank-item>
  </div>

</div>